Pipes ले | अपरेटर प्रयोग गरी सीधै templates मा डेटा रूपान्तरण गर्छ। यसले मानहरू (मितिहरू, मुद्रा, पाठ) फरम्याट गर्न दिन्छ बिना अन्तर्निहित डेटा परिवर्तन गरे वा component मा रूपान्तरण 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 (जस्तै HTTP परिणाम) लाई subscribe गर्छ, उत्सर्जित मान render गर्छ, र component नष्ट हुँदा स्वचालित रूपमा unsubscribe गर्छ — manually subscription प्रबन्धन बिना 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 ক्यास गरिएको छ र केवल तिनीहरूको इनपुट परिवर्तन हुँदा पुनः गणना गर्छ — तिनीहरूलाई प्रदर्शन कुशल बनाउँछ।
Pipes ले डेटा फरम्याटिङ declarative र template मा राख्छ जहाँ यो सम्बन्धित छ, component logic बाट अलग — पुनः प्रयोगयोग्य, चेन गर्न सकिने, र (जब pure हो) कुशल।
Built-in pipes साधारण फरम्याटिङ कभर गर्छ, कस्टम pipes अनुप्रयोग-विशेष रूपान्तरण हैन्डल गर्छ, र async pipe Observable डेटा प्रदर्शन गर्न को लागि मुहावरा र leak-मुक्त तरिका हो — एक प्यात्र्न तपाई Angular मा लगातार प्रयोग गर्नुहुनेछ।