Pipes डेटा को प्रदर्शन के लिए सीधे templates में रूपांतरित करते हैं, | operator का उपयोग करके. वे आपको मान (तारीखें, मुद्रा, पाठ) को प्रारूपित करने देते हैं बिना अंतर्निहित डेटा को बदले या component में transformation logic लिखे।
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
बाईं ओर का मान pipe के माध्यम से पारित होता है; arguments को 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 विशेष रूप से महत्वपूर्ण है: यह Observable को subscribe करता है (जैसे HTTP परिणाम), emitted value को render करता है, और स्वचालित रूप से unsubscribe करता है जब component नष्ट होता है — manual 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 को cache किया जाता है और केवल तभी recalculate होते हैं जब उनका input बदलता है — उन्हें performant बनाता है।
Pipes डेटा formatting को declarative रखते हैं और template में जहां यह है — component logic से अलग, reusable, chainable, और (जब pure हो) efficient।
Built-in pipes common formatting को cover करते हैं, custom pipes app-specific transforms को संभालते हैं, और async pipe Observable data को प्रदर्शित करने का idiomatic, leak-free तरीका है — एक pattern जिसे आप Angular में लगातार उपयोग करेंगे।