Pipe trasformano i dati per la visualizzazione direttamente nei template, usando l'operatore |. Ti permettono di formattare valori (date, valute, testo) senza modificare i dati sottostanti o scrivere logica di trasformazione nel component.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Il valore a sinistra viene passato attraverso il pipe; gli argomenti seguono due punti (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 è particolarmente importante: si iscrive a un Observable (ad esempio un risultato HTTP), renderizza il valore emesso, e si disiscrive automaticamente quando il component viene distrutto — prevenendo memory leak senza gestione manuale delle sottoscrizioni.
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)
I pipe pure sono memorizzati nella cache e vengono ricalcolati solo quando il loro input cambia — rendendoli performanti.
I pipe mantengono la formattazione dei dati dichiarativa e nel template dove appartiene, separata dalla logica del component — riutilizzabili, concatenabili, e (quando pure) efficienti.
I pipe built-in coprono la formattazione comune, i pipe personalizzati gestiscono le trasformazioni specifiche dell'app, e il pipe async è il modo idiomatico e privo di leak per visualizzare dati Observable — un pattern che userai costantemente in Angular.