Angular Pipes
Pipes | பயன்படுத்தி templates-ல் values-ஐ format செய்கின்றன (e.g., date, currency, percent).
Pipes Essentials
- What: Pipes | பயன்படுத்தி templates-ல் values format செய்கின்றன (e.g., date, currency, percent).
- Async: Async pipe Observables-க்கு subscribe செய்து latest value render செய்கிறது, automatically unsubscribing.
- Presentation-only: Pipes ஒரு value எப்படி display செய்யப்படுகிறது என்பதை மாற்றுகின்றன, underlying data-ஐ அல்ல.
- Pure by default: Pure pipes input references change ஆகும் போது run செய்கின்றன; arrays/objects-ன் in-place mutation avoid செய்யவும்.
Pipe Examples
{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'short' }}Notes
- Related: Values display செய்ய Templates, interpolation மற்றும் inputs-க்கு Data Binding, மற்றும் streams of data with async-க்கு HTTP ஆகியவற்றை காணவும்.
- Import CommonModule for built-in pipes in standalone components.
- For custom pipes, use @Pipe({ standalone: true }) and add the pipe to the component imports.
Basic Pipes
Built-in pipes உடன் strings, numbers, dates, மற்றும் பல format செய்யவும்.
பல options accept செய்கின்றன (e.g., currency:'USD', date:'short').
Business logic components/services-ல் வைக்கவும்; pipes presentation-க்கு.
Basic Pipe Syntax
{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'mediumDate' }}
{{ percent | percent:'1.0-2' }}Example
Basic Pipes Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<h3>Pipes</h3>
<p>{{ title | uppercase }}</p>
<p>{{ price | currency:'USD' }}</p>
<p>{{ today | date:'mediumDate' }}</p>
<p>{{ percent | percent:'1.0-2' }}</p>
`
})
export class App {
title = 'Angular';
price = 1234.5;
today = new Date();
percent = 0.3495;
}
bootstrapApplication(App);Example Explained
- uppercase/currency/date/percent: Built-in pipes strings, numbers, மற்றும் dates format செய்கின்றன.
- Options: பல pipes parameters accept செய்கின்றன (e.g., currency:'USD', date:'mediumDate', percent:'1.0-2').
- Pure by default: Pure pipes input reference change ஆகும் போது recompute செய்கின்றன; in-place mutation avoid செய்யவும்.
Notes
- Performance: Pipes-ல் heavy computation avoid செய்யவும்; Components/services-ல் precomputing பயன்படுத்தவும்.
- Pure pipes and mutations: Pure pipes input reference change ஆகும் போது run செய்கின்றன. நீங்கள் arrays/objects in-place mutate செய்யும் போது, pipe re-run செய்யாது—new reference create செய்யவும்.
Async Pipe
Observable-லிருந்து latest value render செய்யவும்.
View destroy ஆகும் போது automatically unsubscribes.
ஒரு முறை subscribe செய்யவும் மற்றும் reuse செய்யவும் value$ | async as value பயன்படுத்தவும்.
Async Pipe Syntax
<ng-container *ngIf="users$ | async as users; else loading">
<li *ngFor="let u of users">{{ u.name }}</li>
</ng-container>
<ng-template #loading>Loading...</ng-template>Example
Async Pipe Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<h3>Async Pipe</h3>
<p>Time: {{ time$ | async | date:'mediumTime' }}</p>
<h4>Users (delayed)</h4>
<ng-container *ngIf="users$ | async as users; else loading">
<ul>
<li *ngFor="let u of users">{{ u.name }}</li>
</ul>
</ng-container>
<ng-template #loading>Loading...</ng-template>
`
})
export class App {
time$ = interval(1000).pipe(map(() => new Date()));
users$ = of([{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }]).pipe(delay(1200));
}
bootstrapApplication(App);Example Explained
- time$ | async: Template-ல் subscribe செய்து latest time value render செய்கிறது.
- *ngIf="users$ | async as users; else loading": ஒரு single subscription create செய்கிறது, users-க்கு assign செய்கிறது, மற்றும் loading ஆக இருக்கும் போது fallback template show செய்கிறது.
- Auto-unsubscribe: Async pipe view destroy ஆகும் போது clean up செய்கிறது.
Notes
- Single subscription: அதே Observable-ல் அதே template area-ல் பல முறை | async பயன்படுத்துவதை avoid செய்யவும்; | async as value ஒரு முறை பயன்படுத்தவும் மற்றும் value reuse செய்யவும்.
- Loading placeholders: Friendly loading state-க்கு *ngIf மற்றும் else template உடன் combine செய்யவும்.
- Lists: Streamed arrays iterate செய்யும் போது, stable identity மற்றும் better performance-க்கு *ngFor-ல் trackBy add செய்யவும்.
Custom Pipe
@Pipe உடன் small, reusable formatters build செய்யவும்.
Standalone ஆக mark செய்யவும் மற்றும் components-ல் import செய்யவும்.
Pure by default; necessary ஆக இருக்கும் போது தவிர impure pipes avoid செய்யவும்.
Custom Pipe Syntax
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
transform(v: string): string { /* ...format... */ return v; }
}Example
Custom Pipe Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Pipe, PipeTransform } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value
.split(/\s+/)
.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
.join(' ');
}
}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule, TitleCase2Pipe],
template: `
<h3>Custom Pipe</h3>
<label>
Text: <input [(ngModel)]="text" placeholder="type here" />
</label>
<p>Original: {{ text }}</p>
<p>TitleCase2: {{ text | titlecase2 }}</p>
`
})
export class App {
text = 'hello angular pipes';
}
bootstrapApplication(App);Example Explained
- @Pipe({ standalone: true }): Reusable, importable pipe declare செய்கிறது.
- transform(value: string): Formatting logic implement செய்கிறது மற்றும் string return செய்கிறது.
- Usage: Template-ல், {{ text | titlecase2 }} உடன் apply செய்யவும்.
Notes
- Impure pipes: அவை ஒவ்வொரு change detection-லும் run செய்கின்றன மற்றும் performance-ஐ hurt செய்யலாம். Pure pipes பயன்படுத்தவும்; strictly necessary ஆக இருக்கும் போது மட்டுமே impure mark செய்யவும்.
- No side effects: Pipes deterministic ஆக வைக்கவும் மற்றும் side effects இல்லாமல் வைக்கவும் (no logging, no service calls).
- Null safety: Template errors avoid செய்ய null/undefined inputs gracefully handle செய்யவும்.