Pipes transformeren gegevens voor weergave rechtstreeks in templates met behulp van de | operator. Ze laten je waarden (datums, valuta, tekst) opmaken zonder de onderliggende gegevens te wijzigen of transformatielogica in het component te schrijven.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
De waarde aan de linkerkant wordt door de pipe doorgegeven; argumenten volgen een dubbele punt (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async is bijzonder belangrijk: het abonneert zich op een Observable (bijv. een HTTP-resultaat), rendert de verzonden waarde, en meldt zich automatisch af wanneer het component wordt vernietigd — waarbij geheugenlekkages worden voorkomen zonder handmatig abonnementsbeheer.
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 }}
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)
Pure pipes worden in cache opgeslagen en worden alleen opnieuw berekend wanneer hun invoer verandert — waardoor ze performant worden.
Pipes houden gegevensopmaak declaratief en in het template waar het thuishoort, gescheiden van componentlogica — herbruikbaar, ketelbaarbaar en (wanneer pure) efficiënt.
De built-in pipes behandelen algemene opmaak, aangepaste pipes behandelen app-specifieke transformaties, en de async pipe is de idiomatische, lek-vrije manier om Observable-gegevens weer te geven — een patroon dat je constant in Angular zult gebruiken.