Theory
Eye के लिए Format कीजिए, Data के लिए नहीं
FestConnect एक event fee को 49.5 number की तरह store करता है और एक date को एक raw timestamp की तरह। पर users को 'Rs 49.50' और '12/07/2026' SEE करना चाहिए। आप formatted strings store कर सकते थे, पर यह data को corrupt करता है (आप 'Rs 49.50' पर math नहीं कर सकते)।
Sही approach: raw data रखिए, और सिर्फ़ DISPLAY करते समय TRANSFORM कीजिए। इसके लिए Angular का tool pipe है: एक display-only formatter जिसे आप template में | operator से apply करते हैं। यह short lesson built-in pipes और अपना खुद बनाना कैसे है cover करता है, ताकि FestConnect का data polished दिखते हुए भी clean रहे।
Theory
Pipes, Formally
एक pipe template में DISPLAY के लिए एक value transform करता है, underlying data बदले WITHOUT। Syntax | operator इस्तेमाल करता है:
{{ event.name | uppercase }} नाम को capitals में दिखाता है; stored value untouched रहता है।
Pipes एक colon के बाद arguments लेते हैं और chain कर सकते हैं:
{{ fee | currency:'INR' }}: currency की तरह format करना{{ today | date:'dd/MM/yyyy' }}: एक date format करना{{ name | lowercase | titlecase }}: दो pipes chain करना
Common built-in pipes: uppercase, lowercase, titlecase, date, currency, percent, slice, json, और async (जो template में ही एक Observable या Promise unwrap करता है)। Key property: pipes read-only formatting हैं; source data कभी नहीं बदलता।
Practical
Built-In Pipes और एक Custom Pipe
// In a template:
// {{ 'garba night' | titlecase }} -> Garba Night
// {{ 49.5 | currency:'INR' }} -> currency-formatted fee
// {{ today | date:'dd/MM/yyyy' }} -> 12/07/2026
// A CUSTOM pipe: @Pipe + PipeTransform
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'seatsLabel' })
export class SeatsLabelPipe implements PipeTransform {
transform(seats: number): string {
return seats > 0 ? seats + ' seats left' : 'Sold out';
}
}
// Used in a template: {{ event.seats | seatsLabel }}
// 350 -> "350 seats left" 0 -> "Sold out"
Theory
एक Custom Pipe लिखना
जब कोई built-in pipe fit न हो, अपना खुद लिखिए:
- @Pipe({ name: 'seatsLabel' }) से decorated एक class
- PipeTransform implement करते हुए एक transform(value, ...args) method के साथ जो transformed value return करता है
फिर इसे किसी भी pipe की तरह एक template में इस्तेमाल कीजिए: {{ event.seats | seatsLabel }}। ऊपर का custom pipe एक seat NUMBER को एक friendly LABEL में बदलता है ('350 seats left' या 'Sold out') purely display के लिए।
React से compare करते हुए: React में कोई pipe syntax नहीं है; आप एक plain JavaScript function call करते या JSX में एक expression लिखते ({seatsLabel(event.seats)})। Angular का pipe template language में built-in एक declarative, reusable formatting tool है, repeated formatting के लिए cleaner, और एक distinctive Angular feature।
Quiz
जब एक pipe {{ price | currency }} जैसी एक value format करता है, यह underlying data का क्या करता है?
- यह stored price को permanently एक formatted string में convert करता है
- कुछ नहीं: एक pipe value को सिर्फ़ DISPLAY के लिए transform करता है; underlying data unchanged रहता है
- यह original value delete करता है
- यह value को एक नए variable में move करता है
Show the answer
कुछ नहीं: एक pipe value को सिर्फ़ DISPLAY के लिए transform करता है; underlying data unchanged रहता है
एक pipe एक DISPLAY-only transform है: {{ price | currency }} template में price को currency की तरह formatted दिखाता है, पर class में underlying price value exactly वैसा रहता है जैसा था (अभी भी वह number जिस पर आप math कर सकते हैं)। Option A pipes को data mutate करने वाला misunderstand करता है, जो ये कभी नहीं करते, यही पूरा point है (clean data रखो, सिर्फ़ eye के लिए format करो)। Option C और D destructive behaviour invent करते हैं। यह separation, class में raw data, pipes के through template में formatting, यही वजह है आपको pre-formatted strings store करने की बजाय pipes से format करना चाहिए: data usable रहता है और display polished रहता है।
Think first
बस 'Rs 49.50' Store क्यों न करें?
fee को string 'Rs 49.50' की तरह store करके directly display करना simpler होगा। Raw number 49.5 रखना और एक currency pipe इस्तेमाल करना बेहतर design क्यों है? फिर tap कीजिए।
Show the answer
क्योंकि 'Rs 49.50' को एक string की तरह store करना number की usefulness DESTROY करता है। आप अब fees add नहीं कर सकते, events को price से sort नहीं कर सकते, एक discount apply नहीं कर सकते, या एक bill total नहीं कर सकते, क्योंकि 'Rs 49.50' text है, number नहीं। Raw 49.5 रखना वह सारा math preserve करता है, और currency PIPE इसे सिर्फ़ दिखाए जाने पर display के लिए format करता है, तो data computable रहता है AND सही दिखता है। Same logic dates पर लागू होता है (एक real date store कीजिए, date pipe से display कीजिए) और किसी भी formatted value पर। यह Angular से आगे एक general principle है: DATA को PRESENTATION से separate कीजिए, data को इसके most useful raw form में रखिए, और edge पर format कीजिए, eye के लिए। Pipes उस separation के लिए Angular का clean mechanism हैं।
Watch out
Pipe Traps
Formatted Strings Store करना: raw data (numbers, dates) रखिए; display के लिए pipes से format कीजिए।
एक Pipe से Data बदलने की Expectation: pipes display-only हैं; source value unchanged रहता है।
PipeTransform के बिना Custom Pipe: PipeTransform और transform() method implement कीजिए, नहीं तो यह काम नहीं करेगा।
Wrong Pipe Arguments: arguments एक colon के बाद आते हैं ({{ x | date:'short' }}); हर pipe के expected arguments check कीजिए।
एक Pipe में Heavy Work: pipes change detection पर चलते हैं; transform() को light रखिए।
Theory
Display Polished; अब Input सही से Capture कीजिए
Pipes format करते हैं FestConnect क्या दिखाता है। दूसरा half है यह क्या COLLECT करता है: forms। Angular दो form approaches offer करता है, template-driven (simple, ngModel इस्तेमाल करते हुए) और reactive (powerful, class में defined), plus validation। अगला lesson दोनों और हर एक कब इस्तेमाल करें cover करता है। फिर final Angular lesson, HttpClient के साथ services और dependency injection, FestConnect को एक real REST API से connect करता है। Forms next।
Summary
Key takeaways
- एक pipe (| operator के through) सिर्फ़ DISPLAY के लिए एक value transform करता है; underlying data unchanged रहता है।
- Syntax: {{ value | pipeName }}; arguments एक colon के बाद ({{ fee | currency:'INR' }}); pipes chain करते हैं।
- Built-in pipes: uppercase, lowercase, titlecase, date, currency, percent, slice, json, async।
- Custom pipe: @Pipe({name}) वाली एक class जो PipeTransform के transform(value, ...args) method को implement करती है।
- Raw data (numbers, dates) रखिए और pre-formatted strings store करने की बजाय pipes से format कीजिए।
- Data को presentation से separate करना values को computable रखता है और display polished।
- Memory hook: pipes eye के लिए | से format करते हैं, data को कभी touch नहीं करते।