Pipes

Ziele

• Du weisst, was Pipes sind und wozu man sie benötigt.
• Du kennst die verschiedenen Arten von Pipes und wie man sie anwendet.
• Du kannst selbst Custom Pipes erstellen.

Pipes

Jede Anwendung beginnt mit einer scheinbar einfachen Aufgabe: Daten abrufen, transformieren und den Benutzern anzeigen. Das Abrufen von Daten kann so einfach wie das Erstellen einer lokalen Variable oder so komplex wie das Streamen von Daten über einen WebSocket sein. Sobald Daten eingehen, könnte man ihre rohen toString-Werte direkt in die View übertragen. Das führt jedoch selten zu einer guten User Experience. In den meisten Anwendungsfällen bevorzugen Benutzer beispielsweise die Anzeige eines Datums in einem einfachen Format wie 15. January 1929 anstelle des rohen Stringformats Tu 15. January 1929 00:00:00 GMT-0700 (Pacific Daylight Time).

Es ist daher klar, dass viele Werte von einer gewissen Verarbeitung profitieren. Viele der Transformationen werden sowohl innerhalb von als auch zwischen Anwendungen wiederholt. Dazu sind Pipes sehr praktisch. Man kann sie sich als Blaupausen für Daten vorstellen.

Eine Pipe nimmt Daten als Eingabe auf und wandelt sie in eine gewünschte Ausgabe um. In diesem Beispiel verwenden wir Pipes, um das Datum der Geburtstage eines Components in ein leserliches Datum umzuwandeln.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { Component } from "@angular/core";

@Component({
  // ..
})
export class BirthdaysComponent {
  // ..

  datesOfBirth: Date[] = [
    new Date(1412, 0, 23),
    new Date(1823, 2, 12),
    new Date(1945, 3, 20),
    new Date(2023, 10, 20),
  ];

  // ..
}

1
2
3

<div *ngFor="let birthday of datesOfBirth; let i = index">
  <p>{{birthday}}, {{ datesOfBirth[i] | date }}</p>
</div>

Parametrisierte Pipes

Eine Pipe kann eine beliebige Anzahl optionaler Parameter akzeptieren, um ihre Ausgabe zu optimieren. Um einer Pipe Parameter hinzuzufügen, fügen wir nach dem Pipe-Namen einen Doppelpunkt (:) und danach den Parameterwert (z. B. date: MMM/dd/yy) hinzu. Wenn die Pipe mehrere Parameter akzeptiert, trennen wir die Werte durch Doppelpunkte (z. B. Slice: 1: 5).

Unser Beispiel von vorher könnten wir z.B. so ausgeben:

1
2
3

<div *ngFor="let birthday of datesOfBirth; let i = index">
  <p>{{ birthday }}, {{ datesOfBirth[i] | date:"MM/dd/yy" }}</p>
</div>

Chaining Pipes

Wir können Pipes in nützlichen Kombinationen miteinander verketten. Im folgenden Beispiel wird der Geburtstag an die DatePipe und an die UpperCasePipe angekettet, um den Geburtstag in Grossbuchstaben anzuzeigen.

1
2
3

<div *ngFor="let birthday of datesOfBirth; let i = index">
  <p>{{ birthday }}, {{ datesOfBirth[i] | date: "MMM/dd/yy" | uppercase }}</p>
</div>

Das Datum wird nun so angezeigt: APR/20/45

AsyncPipe

Die AsyncPipe wird verwendet, um Observables oder Promises im Template zu subscriben und automatisch zu aktualisieren, sobald neue Werte verfügbar sind. Was Observables und Promises sind, wird in einem späteren Kapitel behandelt.

1
2
3

<p>{{ myObservableData$ | async }}</p>
<p>{{ myPromiseData | async }}</p>
<p>{{ myObservableData$ | async | uppercase }}</p>

Custom Pipes

Für spezielle Anwendungsfälle können wir auch unsere eigenen Pipes schreiben.

Wir können Beispielsweise die Schreibweise eines Strings anhand einer Custom Pipe im Template verändern.

1

<li *ngFor="let birthday of datesOfBirth">{{ birthday | capitalize }}</li>

Der Code für die Custom Pipe dieses Beispiels würde so aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "capitalize",
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (value) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
    return "";
  }
}

• Um Angular mitzuteilen, dass dies eine Pipe ist, wenden wir den @Pipe-Decorator an, welchen wir aus @angular/core importieren.
• Die Pipe-Klasse implementiert die Methode transform des PipeTransform-Interface, die einen Eingabewert gefolgt von optionalen Parametern akzeptiert und den transformierten Wert zurückgibt.
• Für jeden an die Pipe übergebenen Parameter gibt es ein zusätzliches Argument für die Methode transform.
• Mit dem @Pipe-Decorator können wir den Pipe-Namen definieren, welchen wir im Template verwenden.