Pipes transformerer data for visning direkte i templates ved hjelp av |-operatoren. De lar deg formatere verdier (datoer, valuta, tekst) uten å endre de underliggende dataene eller skrive transformasjonslogikk i komponenten.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Verdien på venstre side sendes gjennom pipen; argumenter følger et kolon (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 er spesielt viktig: den abonnerer på en Observable (f.eks. et HTTP-resultat), gjengir den utsendte verdien, og avabonnerer automatisk når komponenten blir ødelagt — noe som forhindrer minnelekkasjer uten manuell abonnementsstyring.
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)
Rene pipes er bufret og beregnes bare på nytt når inngangen deres endres — noe som gjør dem effektive.
Pipes holder dataformatering deklarativ og i malen der den hører hjemme, atskilt fra komponentlogikk — gjenbrukbar, kjettbar og (når ren) effektiv.
De innebygde pipes dekker vanlig formatering, egendefinerte pipes håndterer app-spesifikke transformasjoner, og async pipe er den idiomatiske, lekkasjefrie måten å vise Observable-data på — et mønster du vil bruke konstant i Angular.