Pipes ittrasformaw data għad-display direttament fit-templates, billi jużaw l-operatur |. Huma jippermettulek li tifformattja valuri (dates, currency, test) mingħajr ma tbiddel id-data sottostanti jew tikteb logic ta' transformazzjoni fil-component.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Il-valur fuq ix-xellug jitwissal permezz tal-pipe; l-argumenti jsegwu 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 huwa speċjalment importanti: jissoskrivi għal Observable (eż. riżultat ta' HTTP), jirrender il-valur emitted, u awtomatikament jitneħħa s-subscription meta l-component jinqered — iffrena memory leaks mingħajr ma jkollok timmaniggja subscription manwali.
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 huma cached u jirrikomputaw biss meta l-input tagħhom jinbidel — u dan jagħmilhom performanti.
Pipes iżommu d-data formatting deklarattiva u fit-template fejn jappartjeni, separati mill-logic tal-component — reusable, chainable, u (meta pure) effiċjenti.
Il-built-in pipes jgħollfu formatting komuni, custom pipes jħaddmu transforms speċifiċi tal-app, u l-async pipe huwa l-mod idiomatiku u leak-free biex twissel Observable data — pattern li tuża kostantement f'Angular.