Installation of ngx-metafizzy-flickity
npm install ngx-metafizzy-flickity --save
Installation of flickity
npm install flickity --save
Add flickity in angular.json (since Angular 10)
"build": {
...
"options": {
...
"styles": [
"src/styles.scss",
"node_modules/flickity/dist/flickity.css"
],
"allowedCommonJsDependencies": ["flickity"]
},
...
},
Usage
Import FlickityModule into your app's modules:
import { FlickityModule } from 'ngx-metafizzy-flickity';
@NgModule({
imports: [
FlickityModule
]
})
@Component({
selector: "my-component",
template: `
<div flickity>
<div *ngFor="let child of children">{{ child.title }}</div>
</div>
`,
})
class MyComponent {
children = [{ title: "Child 1" }, { title: "Child 2" }, { title: "Child 3" }];
}
Configuration
Options
Read about Flickity options here: https://flickity.metafizzy.co/options.html
Examples
Inline object:
<div
flickity
[flickityConfig]="{cellAlign: 'left', percentPosition: true, groupCells: true}"
></div>
Default options
@Input() flickityConfig: Flickity.Options = {
groupCells: true,
cellAlign: 'center',
pageDots: true,
draggable: true,
prevNextButtons: true,
};
Events
ready: EventEmitter<Flickity>
Triggered after flickity is ready.
https://flickity.metafizzy.co/events.html#ready
change: EventEmitter<number>
Triggered after page is changed.
https://flickity.metafizzy.co/events.html#change
click: EventEmitter<{event: PointerEvent, pointer: PointerEvent, cellElement: string, cellIndex: number}>
Triggered after click an element.
https://flickity.metafizzy.co/events.html#staticClick
Examples
<div flickity (change)="onChange($event)" (click)="onClick($event)"></div>
Demo
