Was sind Pipes in Angular?

Question

Accepted Answer

**Pipes** transformieren Daten **zur Anzeige** direkt in Templates mit dem Operator `|`. Sie ermöglichen das Formatieren von Werten (Daten, Währungen, Text) ohne die zugrunde liegenden Daten zu ändern oder Transformationslogik in der Komponente zu schreiben. ## Verwendung von eingebauten Pipes ```html

``` Der Wert auf der linken Seite wird durch die Pipe geleitet; Argumente folgen nach einem Doppelpunkt (`date:'longDate'`). ## Pipes verketten ```html

``` ## Die async Pipe — ein Highlight ```html

``` `async` ist besonders wichtig: Sie abonniert ein Observable (z. B. ein HTTP-Ergebnis), rendert den emittierten Wert und **deabonniert sich automatisch**, wenn die Komponente zerstört wird — was Speicherlecks ohne manuelle Abonnementverwaltung verhindert. ## Eine benutzerdefinierte Pipe erstellen ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // usage: {{ longText | truncate:50 }} ``` ## Reine vs unreine Pipes ```text Pure (default): re-runs only when the input REFERENCE changes → efficient (cached) Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering) ``` Reine Pipes werden zwischengespeichert und nur neu berechnet, wenn sich ihre Eingabe ändert — was sie performant macht. ## Warum es wichtig ist Pipes halten die Datenformatierung deklarativ und im Template, wo sie hingehört, getrennt von der Komponentenlogik — wiederverwendbar, verkettbar und (wenn rein) effizient. Die eingebauten Pipes decken gängige Formatierungen ab, benutzerdefinierte Pipes handhaben App-spezifische Transformationen, und die `async` Pipe ist die idiomatische, leckfreie Methode zur Anzeige von Observable-Daten — ein Muster, das Sie in Angular ständig nutzen werden.