Pipes ڈیٹا کو ڈسپلے کے لیے براہِ راست templates میں تبدیل کرتے ہیں، | آپریٹر کے ذریعے۔ یہ آپ کو قدروں کو فارمیٹ کرنے دیتے ہیں (تاریخیں، کرنسی، ٹیکسٹ) بغیر بنیادی ڈیٹا تبدیل کیے یا component میں transformation logic لکھے۔
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
بائیں جانب کی قدر pipe کے ذریعے گزرتی ہے؛ آرگیومنٹس ایک کولن کے بعد آتے ہیں (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 خاص طور پر اہم ہے: یہ ایک Observable کو subscribe کرتا ہے (مثلاً ایک HTTP نتیجہ)، خارج کی گئی قدر کو render کرتا ہے، اور component کے destroy ہونے پر خودکار طور پر unsubscribe کر دیتا ہے — جس سے دستی subscription management کے بغیر memory leaks سے بچاؤ ہوتا ہے۔
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 cached ہوتے ہیں اور صرف اُس وقت دوبارہ compute کرتے ہیں جب اُن کا input تبدیل ہو — جو انہیں کارکردگی کے لحاظ سے بہتر بناتا ہے۔
Pipes ڈیٹا فارمیٹنگ کو declarative رکھتے ہیں اور template میں جہاں اس کا تعلق بنتا ہے، component logic سے الگ — قابلِ دوبارہ استعمال، قابلِ زنجیر، اور (جب pure ہوں) موثر۔
بِلٹ اِن pipes عام فارمیٹنگ کا احاطہ کرتے ہیں، custom pipes ایپ کے لیے مخصوص transforms سنبھالتے ہیں، اور async pipe، Observable ڈیٹا دکھانے کا روایتی اور leak سے پاک طریقہ ہے — ایک ایسا pattern جسے آپ Angular میں مسلسل استعمال کریں گے۔