Pipes | ਓਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਿਧਾ templates ਵਿੱਚ ਡੇਟਾ ਨੂੰ ਪਰਿਵਰਤਨ ਕਰਦੇ ਹਨ ਪ੍ਰਦਰਸ਼ਨ ਲਈ। ਉਹ ਤੁਹਾਨੂੰ ਮੁੱਲਾਂ (ਤਾਰੀਖਾਂ, ਮੁਦਰਾ, ਪਾਠ) ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਦਿੰਦੇ ਹਨ ਬਿਨਾਂ ਅੰਤਰੀਵ ਡੇਟਾ ਨੂੰ ਬਦਲਿਆ ਜਾਂ 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 ਨਤੀਜਾ) ਨੂੰ subscribe ਕਰਦਾ ਹੈ, ਭੇਜਿਆ ਗਿਆ ਮੁੱਲ render ਕਰਦਾ ਹੈ, ਅਤੇ component ਨੂੰ ਨਸ਼ਟ ਕਰਦੇ ਸਮੇਂ ਸਵਿਚਲਿਕ ਤੌਰ ਤੇ unsubscribe ਕਰਦਾ ਹੈ — ਮੈਨੁਅਲ subscription ਪ੍ਰਬੰਧਨ ਤੋਂ ਬਿਨਾਂ ਮੈਮੋਰੀ ਲਿਕਸ ਨੂੰ ਰੋਕਦੇ ਹੋਏ।
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 ਤਰਕ ਤੋਂ ਵੱਖਰਾ — ਮੁੜ ਵਰਤੋਂ ਯੋਗ, ਜੋੜਨ ਯੋਗ, ਅਤੇ (ਜਦੋਂ pure ਹਾਂ) ਕੁਸ਼ਲ।
Built-in pipes ਆਮ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ, ਕਸਟਮ pipes ਐਪ-ਖਾਸ ਪਰਿਵਰਤਨ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ, ਅਤੇ async pipe Observable ਡੇਟਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦਾ idiomatic, leak-ਮੁਕਤ ਤਰੀਕਾ ਹੈ — ਇੱਕ ਪੈਟਰਨ ਜਿਸ ਨੂੰ ਤੁਸੀਂ Angular ਵਿੱਚ ਨਿਰੰਤਰ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।