Pipes transformerar data för visning direkt i mallar med hjälp av operatorn |. De låter dig formatera värden (datum, valuta, text) utan att ändra de underliggande data eller skriva transformeringslogik i komponenten.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Värdet på vänster sida passeras genom pipe; argument följs av ett 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 är särskilt viktigt: det prenumererar på en Observable (t.ex. ett HTTP-resultat), renderar det utsänt värdet och avprenumererar automatiskt när komponenten förstörs — förhindrar minnesläckor utan manuell prenumerationshantering.
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)
Rena pipes är cachade och beräknas endast när deras inmatning ändras — vilket gör dem effektiva.
Pipes håller dataformatering deklarativ och i mallen där den hör hemma, skild från komponentlogik — återanvändbar, kedjebar och (när den är ren) effektiv.
De inbyggda pipes täcker gemensam formatering, anpassade pipes hanterar appspecifika transformeringar, och async pipe är det idiomatiska, läckfria sättet att visa Observable-data — ett mönster du kommer att använda konstant i Angular.