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 விளைவு), உமிழப்பட்ட மதிப்பை வழங்குகிறது மற்றும் 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 ஐ cache செய்யப்பட்ட மற்றும் அவர்களின் input மாறும்போது மட்டுமே மறுசெய்யப்படும் — அவர்களை திறமையாக செய்கிறது.
Pipes டேटா வடிவமைப்பை அறிக்கை மூலம் மற்றும் template இல் அது சேர்ந்தது, component தர்க்கத்தில் இருந்து பிரிந்து — மறுபயன்பாடு செய்யக்கூடிய, செயல்படுத்த முடிந்த, மற்றும் (தூய இருக்கும்போது) திறமையாக.
உள்ளமைந்த pipes பொதுவான வடிவமைப்பை உள்ளடக்கியது, தனிப்பயன் pipes app-குறிப்பிட்ட மாற்றங்களைக் கையாள்கிறது, மற்றும் async pipe Observable டேटா காட்ட idiomatik, கசிவு-இல்லாத வழி — Angular இல் நீங்கள் தொடர்ந்து பயன்படுத்தும் வடிவம்.