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 ఫలితం), విడుదల చేసిన విలువను రెండరు చేస్తుంది మరియు component నాశనమైనప్పుడు స్వయంచాలకంగా సభ్యుడిని వదిలివేస్తుంది — చేతి సభ్యత్వ నిర్వహణ లేకుండా మెమరీ లీక్లను నిరోధిస్తుంది.
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)
స్వచ్ఛమైన pipes తాకిటీకరించబడ్డాయి మరియు వాటి ఇన్పుట్ మారినప్పుడు మాత్రమే సవరించబడ్డాయి — వాటిని సమర్థవంతంగా చేస్తుంది.
Pipes డేటా ఫార్మాటింగ్ను నిర్ధారణీయమైనదిగా మరియు template లో ఉంచుతాయి ఇది చెందిన చోట, component తర్కం నుండి వేరుగా — పునర్ముఖ్యమైన, చేపట్టదగిన, మరియు (స్వచ్ఛమైన అయినప్పుడు) సమర్థవంతమైన.
అంతర్నిర్మిత pipes సాధారణ ఫార్మాటింగ్ను కవర్ చేస్తాయి, ఎడిట్ చేసిన pipes అనువర్తన-నిర్దిష్ట రూపాంతరాలను నిర్వహిస్తాయి, మరియు async pipe Observable డేటాను ప్రదర్శించడానికి idiomatik, లీక్-రహిత మార్గం — Angular లో మీరు నిరంతరం ఉపయోగిస్తున్న నమూనా.