Pipes sune magudanar da ke canza data don nunin kai tsaye a cikin templates, ta amfani da | operator. Suna baba ka ka saba wa abubuwa (jiya, kuɗi, rubutu) ba tare da canja data na ƙasa ba ko rubuta jujjuyawar tunani a cikin component.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Jiya a gefen hagu ana wuce ta hanyar pipe; jinjirau suna biyan 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 yana da mahimmanci sosai: yana shiga Observable (misali sakamakon HTTP), yana kawo da jiya da aka aika, kuma yana kasatsi ta saura lokacin da component ya hallaka — yana dakatar da ƙwararar ƙwaƙwalwa ba tare da ba na ƙaura ba.
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)
Toyyar pipes an ajiye masu ƙwararar, kuma suna ƙididdige kawai lokacin da su ajiye — yana ƙira masu aiki.
Pipes suna ajiye tsarin data da fili kuma a cikin template inda ya tokare — daban-daba daga tunani na component — ba zai sake amfani, zai ƙi daure, kuma (lokacin da pure) aiki.
Built-in pipes suna rufe tsarin gida, custom pipes suna malami sauye-sauye na app, kuma async pipe shine hanyar idiomatik, ba tare da aikin ƙwararar ba, don nunin Observable data — sauya da za ka yi akai-akai a cikin Angular.