🧰 Angular Pipes – Saubere Darstellung statt Logik im Template

(Transformiere Daten direkt im Template – performant, lesbar, wiederverwendbar)

Angular Pipes sind kleine, aber mächtige Helfer –
sie sorgen dafür, dass deine Templates clean bleiben und sich auf das Darstellen konzentrieren, nicht auf Logik.

1️⃣ Built-in Pipes, die du täglich brauchst

Pipe	Zweck	Beispiel
`date`	Datum formatieren	`{{ today
`currency`	Preis darstellen	`{{ price
`uppercase`	Text in Großbuchstaben	`{{ name
`json`	Objekt als JSON anzeigen	`{{ data
`async`	Observables automatisch abonnieren	`{{ obs$

2️⃣ Eigene Pipe schreiben

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.substring(0, limit) + '…' : value;
  }
}

Verwendung:

<p>{{ longText | truncate:30 }}</p>

3️⃣ Pure vs. Impure Pipes

Typ	Beschreibung
Pure	Wird nur neu berechnet, wenn sich der Eingabewert ändert
Impure	Wird bei jeder Änderung im Change Detection Cycle aufgerufen

👉 Default ist pure: true.
Nur bei Spezialfällen pure: false setzen – z. B. bei i18n, Deep-Watch-Objekten.

4️⃣ Performance-Tipp mit `async`

<!-- ✅ Best Practice -->
<p>{{ user$ | async }}</p>

<!-- ❌ Anti-Pattern -->
<p *ngIf="(user$ | async) as user">{{ user.name }}</p>

💡 Nutze @if (Control Flow Syntax), sobald verfügbar, um die Lesbarkeit noch weiter zu erhöhen.

Fazit

Pipes machen dein Template ausdrucksstark, schlank und leserlich.
Weniger Logik im HTML = mehr Fokus auf das Wesentliche.

📚 Nächster Beitrag:
⚙️ Angular Module Federation – Microfrontends richtig gemacht