Manchmal reichen die integrierten Pipes in Angular 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 automatisch ein ✅-Emoji zu deren Titeln hinzufügen. Anstatt diese Logik in jede Vorlage einzubauen, können Sie dafür eine eigene Pipe erstellen.

Wie man eine benutzerdefinierte Pipe erstellt

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 diese 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 transform-Methode erhält einen Wert (die Eingabe) und optionale Argumente und gibt ein transformiertes Ergebnis zurück. Derzeit wird lediglich die Eingabe unverändert zurückgegeben;

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

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

Wir müssen dem Titel ein ✅ Emoji hinzufügen, abhängig vom Abschlussstatus der Aufgabe (task.completed). Aktualisieren Sie die Pipe, 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 erledigt ist.

Wenn die Aufgabe abgeschlossen ist (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.