Flickity ist ein Karussell / Slider für HTML-Elemente auf Basis von VanillaJS. Es ist für Mobilgeräte, also touch und responsive, geeignet und erfreut sich großer Beliebtheit. Die vielen Optionen und Varianten von Flickity bieten alles, was das Auge (oder der Kunde) begehrt.
Auf der Webseite von Flickity wird sehr einfach gezeigt, wie die Einbindung in VanillaJS und jQuery funktioniert – und genau hier habe ich angesetzt.
Als Angular-Liebhaber möchte ich Flickity natürlich auch gerne möglichst einfach in Angular einsetzen können und habe daher einen Wrapper geschrieben.
Im folgenden beschreibe ich, wie das Zusammenspiel von Angular und Flickity mit meinem Wrapper funktioniert. Voraussetzung ist ein existierendes Angular-Projekt.
Zu haben ist das Paket auch bei npm.
Installation von ngx-metafizzy-flickity
Den Wrapper (also die Directive) kann ich aus dem genannten npm Paket installieren.
npm install ngx-metafizzy-flickity --save
Installation von Flickity
Natürlich benötige ich auch Flickity, welches ich ebenfalls per npm installieren können.
npm install flickity --save
Flickity in die angular.json einfügen (seit Angular 10)
Damit Flickity im Angular-Projekt korrekt funktioniert sind zwei Einträge in der angular.json nötig.
Die Styles werden – überraschenderweise – für die Darstellung benötigt.
Der Eintrag “allowedCommonJsDependencies” wird seit Angular 10 empfohlen. Ohne diesen Eintrag wird im Build-Prozess eine Warnung ausgegeben, wenn Pakete mit CommonJS gepackt sind. Dies kann(!) zu größeren langsameren Apps führen.
Mehr dazu im offiziellen Angular Blog-Eintrag
"build": {
...
"options": {
...
"styles": [
"src/styles.scss",
"node_modules/flickity/dist/flickity.css"
],
"allowedCommonJsDependencies": ["flickity"]
},
...
},
Nutzung
Nach der erfolgreichen Installation kann ich Flickity einsetzen. Dazu importiere ich das “FlickityModule” im entsprechenden Modul, um die directive “flickity” zur Verfügung zu haben.
Diese kann jetzt auf ein HTML-Element, z.B. ein <div>, gesetzt werden. Die Kind-Elemente werden dadurch für Flickity aufbereitet und entsprechend der Konfiguration dargestellt. Es kann nötig sein, das Vater-Element zu stylen (display: block, width: 100%).
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" }];
}
Konfigurationsmöglichkeiten
Optionen
Die Flickity bekannten Optionen können durchgereicht werden. Eine Liste der Flickity Optionen gibt es auf https://flickity.metafizzy.co/options.html
Beispiel
Die Optionen können per Objekt in die directive reingereicht werden.
<div flickity [flickityConfig]="{cellAlign: 'left', percentPosition: true, groupCells: true}"></div>
Standard-Optionen
Werden keine Optionen angegeben, werden die folgenden Standard-Werte verwendet.
{
groupCells: true,
cellAlign: 'center',
pageDots: true,
draggable: true,
prevNextButtons: true,
}
Unterstütze Events
ready: EventEmitter<Flickity>
Wird gefeuert, wenn Flickity fertig initialisiert ist (https://flickity.metafizzy.co/events.html#ready)
change: EventEmitter<number>
Wird gefeuert, wenn die Seite im Karussell / Slider gewechselt wird (https://flickity.metafizzy.co/events.html#change)
click: EventEmitter<{event: PointerEvent, pointer: PointerEvent, cellElement: string, cellIndex: number}>
Wird gefeuert, wenn ein Element angeklickt wird (https://flickity.metafizzy.co/events.html#staticClick)
Beispiel
<div flickity (change)="onChange($event)" (click)="onClick($event)"></div>
Demo
Wer sich das Zusammenspiel vorab ansehen möchte, kann das github Projekt laden und mit “ng serve” das Beispiel starten.
Dies wird mit den Standard-Optionen gestartet.
