Pipes transformojnë të dhëna për shfaqje drejtpërdrejt në shabllone, duke përdorur operatorin |. Ato ju lejojnë të formatoni vlerat (datat, valutën, tekstin) pa ndryshuar të dhënat themelore ose shkruar logjikën e transformimit në komponent.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Vlera në të majtën futet përmes pipe; argumentet pasojnë dy pikë (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 është veçanërisht i rëndësishëm: ai abonohet në një Observable (p.sh. rezultatin e HTTP-ës), shfaq vlerën e emetuar dhe automatikisht anulohet kur komponenta shkatërrohet — duke parandaluar rrjedhjet e kujtesës pa menaxhim manual të abonimeve.
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 e pastër ruhen në cache dhe rillogariten vetëm kur hyrja e tyre ndryshon — duke i bërë ato efikase.
Pipes e mbajnë formatimin e të dhënave deklarativ dhe në shabllon ku duhet të jetë, të veçuara nga logjika e komponentit — të ripërdorshme, të zinxhirueshme dhe (kur janë të pastra) efikase.
Pipes e ndërtuar mbulojnë formatimin e zakonshëm, pipes e përshtatshme trajtojnë transformimet specifike të aplikacionit, dhe pipe async është mënyra idiomatike, pa rrjedhje, për të shfaqur të dhënat Observable — një model që do ta përdorni vazhdimisht në Angular.