Häufig besteht die Notwendigkeit, Daten auf eine klare und ansprechende Weise darzustellen. Dazu gehört beispielsweise das Formatieren von Namen, Daten, Preisen, Prozentwerten oder Listenelementen.

Wenn all diese Transformationen manuell innerhalb der Komponentenlogik durchgeführt werden, können die Templates schnell unübersichtlich und schwer wartbar werden. 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 Daten direkt im Template formatiert werden sollen, kann eine Pipe mit dem Symbol | (Pipe) angewendet werden:

{{ value | pipeName }}

Mehrere Pipes können auch miteinander verkettet werden:

{{ value | pipe1 | pipe2 }}

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

{{ value | pipeName:param1:param2 }}

Angular bietet eine Reihe von integrierten 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 komplett 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 die Ausgabe auf der Seite: ALEX sein.

Datumsformatierung

Neben Zeichenketten ist eines der am häufigsten zu formatierenden Datentypen ein Datum.

Stellen Sie sich vor, Sie haben ein user-Objekt. Sie möchten das Datum, an dem der Benutzer beigetreten ist, in einem übersichtlichen, lesbaren Format anzeigen:

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

Die date-Pipe unterstützt eine Vielzahl von Formaten, wie short, medium, fullDate oder sogar 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 die currency-Pipe:

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

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

Es gibt viele weitere nützliche Pipes in Angular. Auch wenn hier nicht alle behandelt werden, finden Sie nachfolgend eine kurze Referenzliste von Pipes, die bisher nicht erwähnt wurden:

Weitere Informationen zu jedem Pipe finden Sie in der offiziellen Angular-Dokumentation.