ng-character-select-carousel

NgCharacterSelectCarouselModule

• A spinning character select carousel supporting 3 characters. Powered by gsap.
• Library location: projects/ng-character-select-carousel directory of this repository.

Examples/Demo

• An example can be found under src/app directory of this repository.

Installation

npm i ng-character-select-carousel

API

import {NgCharacterSelectCarouselModule} from 'ng-character-select-carousel';
selector: ng-character-select-carousel

@Inputs()

Input	Type	Required	Description
image1Url	string	Optional, default: sample image	Url to character 1 image. If blank a sample image is used
image1MaskUrl	string	Optional, default: sample image	Url to character 1 image mask . If blank a sample image is used
image2Url	string	Optional, default: sample image	Url to character 2 image. If blank a sample image is used
image2MaskUrl	string	Optional, default: sample image	Url to character 2 image mask . If blank a sample image is used
image2Url	string	Optional, default: sample image	Url to character 3 image. If blank a sample image is used
image2MaskUrl	string	Optional, default: sample image	Url to character 3 image mask . If blank a sample image is used
spins	Observable	Optional	For submitting left/right spin events.

@Outputs()

Output	Type	Required	Description
selectedAvatar	number	No	emits the index of the selected character

Usage

• Register the NgxMatTypeaheadModule in your app module.

import {NgCharacterSelectCarouselModule} from 'ng-character-select-carousel';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {NgCharacterSelectCarouselModule} from 'ng-character-select-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgCharacterSelectCarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Use the NgCharacterSelectCarouselComponent in your component.

import {Component} from '@angular/core';
import {Subject} from 'rxjs';
import {Direction} from 'ng-character-select-carousel';

@Component({
  selector: 'app-root',
  template: `
      <div class="page">
        <div>
          <button (click)="left()">Left</button>
          <span>{{selectedAvatar}}</span>
          <button (click)="right()">Right</button>
        </div>
        <ng-character-select-carousel
            [spins]="eventsSubject.asObservable()"
            (selectedAvatar)="onSelectedAvatar($event)">
        </ng-character-select-carousel>        
      </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'character-select-carousel';

  public selectedAvatar: number;

  eventsSubject: Subject<Direction> = new Subject<Direction>();

  public left() {
    this.eventsSubject.next(Direction.Left);
  }

  public right() {
    this.eventsSubject.next(Direction.Right);
  }

  public onSelectedAvatar(index: number) {
    this.selectedAvatar = index;
  }
}

Running the example in local env

• npm i
• Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build the component

Run ng build ng-character-select-carousel to build the library. The build artifacts will be stored in the dist/ng-character-select-carousel directory. Use the --prod flag for a production build.

Image masks

For each character image an image mask should be provided.

This is an image that follows the outline of the character image with a white background.

This ensures there is no transparency overlap as characters spin over each other.

For example:

Character image:

Image mask:

Credits

gsap is amazing!