Pipes hubadilisha data kwa ajili ya kuonyeshwa moja kwa moja katika violezo, kwa kutumia kiendeshi |. Wanakuruhusu kuweka umbizo kwa maadili (tarehe, sarafu, maandishi) bila kubadilisha data ya chini au kuandika mantiki ya mabadiliko katika sehemu.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Thamani upande wa kushoto inapita kupitia pipe; hoja zinafuata nukta (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 ni muhimu sana: inajitolea kwa Observable (k.m matokeo ya HTTP), huonyesha thamani iliyotolewa na kujisajili moja kwa moja wakati sehemu inabomolewa — kukaribisha maboresho ya kumbukumbu bila kusimamia msomeko wa mikono.
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 safi huhifadhiwa katika kache na kuhesabiwa tena tu wakati pembejeo yake inabadilika — kuwafanya kuwa mahususi.
Pipes huweka umbizo la data linaloelezwa na katika kiolezo ambacho kiko, kimetenganishwa na mantiki ya sehemu — inayotaka kurudiwa, inayofungwa, na (wakati ni safi) inayohusika.
Pipes iliyojengwa inayofunika umbizo la kawaida, pipes za kawaida zinarukia mabadiliko ya programu maalum, na async pipe ndio njia ya idiomatiki, bila maboresho, ya kuonyesha data ya Observable — mfumo ambao utakutumia kila wakati katika Angular.