@the-wave-studio/ngx-flickity NPM

ngx-flickity

Version

A modern Angular module that exposes a component to create and control flickity slider instances.

Installation

npm i -s @the-wave-studio/ngx-flickity

Usage

Import TwNgxFlickityModule into your app's modules:

import {TwNgxFlickityModule} from "@the-wave-studio/ngx-flickity";

@NgModule({
 imports:  [
    // ..., other imports
    TwNgxFlickityModule
 ]
})

Then you can use the component in your app, take care of watchItems @Input is mandatory for correctly update the slider onChanges:

<section class="FlickitySlider">  
 <tw-flickity-slider [watchItems]="slides"  
					 *ngIf="slides?.length"  
 >  
	 <div *ngFor="let slide of slides">{{slide}}</div> 
 </tw-flickity-slider>
 </section>

Configuration

You can configure the component with the following attributes:

disabled: boolean (default false) - If set true destroy/negate the activation of the component's current flickity instance.
config: TWFlickityConfig (default {flickityOptions:{watchCSS:true}}) entrypoint for custom configuration.

Here you have a TWFlickityConfig model representation:

type TWFlickityConfig = {
    flickityOptions: object; // flickity custom options ref: https://flickity.metafizzy.co/options.html
    sliderClass: string; // use for adding class to the slider wrapper element
}

Events

There is an EventEmitter for each Flickity event, you can see the entire list in the flickity site.

Sample code

<app-flickity-slider [watchItems]="items"  
					 *ngIf="items?.length"  
>  
	<div class="col-12 col-md-6 col-lg-3"  
		 *ngFor="let item of items"  
		 (onChange)="currentSlideChanged($event)"  
	 >  
		<div class="feature">  
		<div class="icon">
			<i [class]="item['icon-class']"></i>
		</div>  
		<p class="description">{{ item.description}}</p>  
	 </div> 
 </div>
 </app-flickity-slider>

Currently emitted events: