Flickity module for Angular2
ngx-flickity is in development and not ready for production use.
Feel free to install and try it out, but depend on it at your own risk.
Installation
npm install ngx-flickity --save
Usage
Import FlickityModule into your app's modules:
import { FlickityModule } from 'ngx-flickity';
@NgModule({
imports: [
FlickityModule
]
})
@Component({
selector: 'my-component',
template: `
<div [flickity]>
<div [flickityChild] *ngFor="let child of children">{{child.title}}</div>
</div>
`
})
class MyComponent {
children = [
{title: 'Child 1'},
{title: 'Child 2'},
{title: 'Child 3'},
{title: 'Child 4'},
{title: 'Child 5'},
{title: 'Child 6'}
]
}
Configuration
Options
Read about Flickity options here: https://flickity.metafizzy.co/options.html
Examples
Inline object:
<div [flickity]="{cellAlign: 'left', percentPosition: true, groupCells: true}"></div>
Events
slideSelect: EventEmitter<number>
Triggered after a slide has changed.
https://flickity.metafizzy.co/events.html#select
cellStaticClick: EventEmitter<number>
Triggered after a cell has been clicked.
https://flickity.metafizzy.co/events.html#staticclick
Examples
<div [flickity] (slideSelect)="onSelect($event)"></div>
