Pipes डेटा प्रदर्शनासाठी सरळ templates मध्ये रूपांतरित करतात, | ऑपरेटर वापरून. ते मूल्ये (dates, currency, text) फॉर्मेट करू देतात बिना अंतर्निहित डेटा बदलल्या किंवा component मध्ये रूपांतरण 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 (उदा. एक HTTP परिणाम) subscribe करते, emitted मूल्य render करते, आणि स्वयंचलितपणे unsubscribe करते जेव्हा component destroy होते — memory leaks टाळते बिना manual subscription management च्या.
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 असतात आणि फक्त त्यांचे input बदलते तेव्हाच recompute होतात — ज्यामुळे ते efficient असतात.
Pipes डेटा formatting declarative ठेवते आणि template मध्ये जिथे ते असले पाहिजे तिथे — component logic पासून वेगळे — reusable, chainable, आणि (जेव्हा pure असतात तेव्हा) efficient.
Built-in pipes सामान्य formatting कव्हर करतात, custom pipes app-specific transforms हाताळतात, आणि async pipe हा idiomatic, leak-free मार्ग आहे Observable डेटा प्रदर्शित करण्यासाठी — एक pattern जो तू Angular मध्ये सतत वापरशील.