Häufig besteht die Anforderung, Daten klar und ansprechend darzustellen. Dazu gehört beispielsweise das Formatieren von Namen, Daten, Preisen, Prozentwerten oder Listenelementen.

Wenn alle diese Umwandlungen manuell in der Komponentenlogik erfolgen, werden die Templates schnell unübersichtlich und schwer wartbar. Zur Lösung dieses Problems stellt Angular ein übersichtliches und einfaches Feature bereit: Pipes — eine Möglichkeit, Daten direkt im Template zu transformieren.

Was sind Pipes?

Stellen Sie sich eine Pipe als ein Werkzeug vor, das Rohdaten entgegennimmt, sie verarbeitet und eine modifizierte Version ausgibt – ähnlich wie ein Filter in einem Datenstrom.

Verwendung von Pipes in Angular

Immer wenn eine Datenformatierung direkt im Template erforderlich ist, kann eine Pipe mit dem Symbol | (Pipe) angewendet werden:

{{ value | pipeName }}

Es können sogar mehrere Pipes miteinander verkettet werden:

{{ value | pipe1 | pipe2 }}

Einige Pipes akzeptieren auch Parameter, die Sie mit Doppelpunkten (:) übergeben:

{{ value | pipeName:param1:param2 }}

Angular bietet eine Reihe integrierter Pipes, um gängige Formatierungsanforderungen zu erfüllen — von Zahlen und Datumsangaben bis hin zu Währungs- und Groß-/Kleinschreibungsumwandlungen. Im Folgenden werden praxisnahe Beispiele vorgestellt, beginnend mit den Grundlagen bis hin zu fortgeschrittenen Anwendungsfällen.

Zeichenketten-Transformation

Angenommen, Sie haben eine Eigenschaft username in Ihrer Komponente. Es ist oft nützlich, den Namen eines Benutzers hervorzuheben oder zu betonen, indem er vollständig in Großbuchstaben angezeigt wird.

Hier wird die Eigenschaft userName aus der Komponente entnommen und mit dem integrierten uppercase-Pipe von Angular in Großbuchstaben umgewandelt. Wenn also userName = 'alex' ist, wird auf der Seite folgendes angezeigt: ALEX.

Datumsformatierung

Neben Zeichenketten ist das Datum einer der am häufigsten zu formatierenden Datentypen.

Stellen Sie sich vor, Sie haben ein user-Objekt. Sie möchten das Beitrittsdatum in einem klaren, lesbaren Format anzeigen:

Wenn user.dateJoined = new Date(2023, 3, 15) ist, wäre das Ergebnis: Joined on: April 15, 2023.

Der date-Pipe unterstützt eine Vielzahl von Formaten, wie zum Beispiel short, medium, fullDate oder auch benutzerdefinierte Formate wie dd/MM/yyyy.

Währungsanzeige

Sie arbeiten mit einem product-Objekt. Um den Preis in einer bestimmten Währung anzuzeigen, verwenden Sie den currency-Pipe:

Wenn product.price = 199.99, ist die Ausgabe: Price: $199.99.

Die Currency Pipe kann mit Ländereinstellungen, Anzeigestil und der Option, das Währungssymbol anzuzeigen oder auszublenden, angepasst werden.

In Angular stehen viele weitere nützliche Pipes zur Verfügung. Auch wenn hier nicht alle behandelt werden, finden Sie nachfolgend eine kurze Referenzliste von Pipes, die bisher nicht erwähnt wurden:

Weitere Informationen zu den einzelnen Pipes finden Sie in der offiziellen Angular-Dokumentation.