Manchmal reichen die eingebauten Pipes in Angular einfach nicht aus. Möglicherweise benötigen Sie eine spezielle Transformation, die spezifisch für Ihre Anwendung ist. In diesem Fall können Sie eine eigene benutzerdefinierte Pipe erstellen.

Angenommen, Sie haben eine Liste von Aufgaben, und jede Aufgabe kann entweder abgeschlossen sein oder nicht. Um abgeschlossene Aufgaben optisch hervorzuheben, möchten Sie ihren Titeln automatisch ein ✅-Emoji hinzufügen. Anstatt diese Logik in jede Vorlage einzubauen, können Sie dafür eine eigene Pipe erstellen.

Erstellen einer benutzerdefinierten Pipe

Um eine benutzerdefinierte Pipe in Angular zu generieren, verwenden Sie den folgenden CLI-Befehl. Wir nennen sie formatTitle, da sie den Aufgabentitel basierend auf dem Abschlussstatus formatiert:

Dadurch werden zwei Dateien erstellt:

• format-title.pipe.ts — die Pipe-Logik;

• format-title.pipe.spec.ts — eine Datei für Unit-Tests (Sie können sie löschen, wenn Sie aktuell keine Tests benötigen).

Wenn Angular die Pipe generiert, sieht sie ungefähr so aus:

Das bewirkt dieser Code:

• Die Klasse FormatTitlePipe implementiert PipeTransform, was sicherstellt, dass die Pipe über eine transform-Methode verfügt;

• Die Methode transform erhält einen Wert (die Eingabe) und optionale Argumente und gibt ein transformiertes Ergebnis zurück. Derzeit gibt sie einfach die Eingabe unverändert zurück;

• Der Name der Pipe (formatTitle) wird im @Pipe-Dekorator definiert — das ist der Name, der im Template verwendet wird.

Aktuell existiert die Pipe, führt aber noch keine Funktion aus. Im nächsten Schritt wird die eigentliche Logik hinzugefügt.

Implementierung einer benutzerdefinierten Pipe

Dem Titel soll abhängig vom Abschlussstatus der Aufgabe (task.completed) ein ✅-Emoji hinzugefügt werden. Die Pipe ist entsprechend zu aktualisieren, um unsere benutzerdefinierte Formatierungslogik anzuwenden:

Die Methode transform nimmt zwei Argumente entgegen:

• value — der Titel der Aufgabe;

• completed — ein Boolean, der angibt, ob die Aufgabe abgeschlossen ist.

Ist die Aufgabe abgeschlossen (true), wird am Ende des Titels ein ✅-Emoji hinzugefügt. Andernfalls wird der Titel unverändert zurückgegeben.

Verwendung der Pipe in einer Vorlage

Um die Pipe in Ihrer Angular-Vorlage zu verwenden, wenden Sie sie mit dem Pipe-Symbol | an:

Was hier passiert:

• task.title ist der Wert, der an die Pipe übergeben wird;

• formatTitle:task.completed wendet die Pipe an und übergibt das completed-Flag;

• Der Titel enthält je nach Status der Aufgabe entweder das ✅-Emoji oder nicht.

Die Verwendung von Pipes auf diese Weise hält Ihre Vorlagen übersichtlich und lesbar und verlagert die Formatierungslogik in wiederverwendbaren, testbaren Code.