Flickity für Angular

Thorsten Rintelen

Seit über 20 Jahren Software-Developer, Spezialisiert auf Angular, Teamleiter Entwicklung bei der traperto GmbH

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.