Pipes ડેટાને ડિસ્પ્લે માટે સીધો templates માં રૂપાંતરિત કરે છે, | operator નો ઉપયોગ કરીને. તેઓ તમને મૂલ્યો (તારીખો, ચલણ, ટેક્સ્ટ) ફોર્મેટ કરવાની મંજૂરી આપે છે અંતર્નિહિત ડેટા બદલ્યા વિના અથવા component માં રૂપાંતર તર્ક લખ્યા વિના.
{{ 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 પરિણામ) માં સબ્સ્ક્રાઇબ કરે છે, emitted value રેન્ડર કરે છે, અને આપોઆપ unsubscribe કરે છે જ્યારે component નાશ પામે છે — મેમરી 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 cache કરવામાં આવે છે અને જ્યારે તેમનો input બદલાય ત્યારે જ પુનરાવર્તિત કરે છે — તેમને કાર્યક્ષમ બનાવે છે.
Pipes ડેટા formatting ને declarative રાખે છે અને template માં જ્યાં તે હોવું જોઈએ — component logic થી અલગ, પુનઃઉપયોગી, chainable, અને (જ્યારે pure હોય) કાર્યક્ષમ.
Built-in pipes સામાન્ય formatting કવર કરે છે, custom pipes app-specific transforms હેન્ડલ કરે છે, અને async pipe Observable data ને દર્શાવવાનો idiomatic, leak-free રીત છે — એક પેટર્ન જેનો તમે Angular માં સતત ઉપયોગ કરશો.