Pipes transformă date pentru afișare direct în template-uri, folosind operatorul |. Ele te lasă să formatezi valori (date, valute, text) fără a schimba datele de bază sau a scrie logică de transformare în componentă.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Valoarea din stânga este transmisă prin pipe; argumentele urmează după un colon (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 este deosebit de important: se abonează la un Observable (de exemplu, un rezultat HTTP), redă valoarea emisă și se dezabonează automat atunci când componenta este distrusă — prevenind scurgerile de memorie fără gestionarea manuală a abonării.
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)
Pipes-urile pure sunt memorate în cache și se recalculează doar atunci când intrarea se schimbă — ceea ce le face eficiente.
Pipes-urile mențin formatarea datelor declarativ și în template-ul unde aparține, separat de logica componentei — reutilizabil, înlănțuibil și (când sunt pure) eficient.
Pipes-urile încorporate acoperă formatarea comună, pipes-urile personalizate gestionează transformări specifice aplicației, iar pipe-ul async este modalitatea idiomatică și fără scurgeri de a afișa date Observable — un model pe care îl vei folosi constant în Angular.