Angular Pipes (built-in: uppercase, lowercase, currency, date, percent, titlecase, slice; creating custom pipes)

📖 Theory

આંખ માટે ગોઠવો, data માટે નહીં

FestConnect event ની ફી 49.5 સંખ્યા તરીકે સંઘરે છે અને તારીખ કાચા timestamp તરીકે. પણ users ને 'Rs 49.50' અને '12/07/2026' દેખાવું જોઈએ. તમે ગોઠવેલી strings સંઘરી શકો, પણ એથી data બગડે છે (તમે 'Rs 49.50' પર ગણિત ન કરી શકો).

સાચી રીત આ છે: કાચો data સાચવો, અને એને ફક્ત બતાવતી વખતે જ બદલો. Angular નું આ માટેનું સાધન એટલે pipe: એવો ફક્ત દેખાવ પૂરતો ગોઠવણકાર જેને તમે template માં | operator વડે લગાડો છો. આ ટૂંકો પાઠ અંદરથી મળતા pipes અને પોતાનો pipe કઈ રીતે લખવો એ આવરી લે છે, જેથી FestConnect નો data ચોખ્ખો રહે અને દેખાવ સુઘડ.

📖 Theory

Pipes, ઔપચારિક રીતે

Pipe કિંમતને TEMPLATE માં ફક્ત બતાવવા પૂરતી બદલે છે, અને નીચેના data ને અડતું નથી. એની syntax | operator વાપરે છે:

{{ event.name | uppercase }} નામ મોટા અક્ષરોમાં બતાવે છે; સંઘરાયેલી કિંમત એમની એમ રહે છે.

Pipes colon પછી દલીલો લે છે અને એમને સાંકળી પણ શકાય છે:

• {{ fee | currency:'INR' }}: ચલણ તરીકે ગોઠવે
• {{ today | date:'dd/MM/yyyy' }}: તારીખ ગોઠવે
• {{ name | lowercase | titlecase }}: બે pipes ને સાંકળે

અંદરથી મળતા સામાન્ય pipes: uppercase, lowercase, titlecase, date, currency, percent, slice, json, અને async (જે Observable કે Promise ને template માં જ ખોલી આપે છે). મુખ્ય ગુણ આ છે: pipes ફક્ત વાંચીને ગોઠવે છે; મૂળ data કદી બદલાતો નથી.

⌨️ Practical

અંદરથી મળતા pipes અને custom pipe

// Template માં:
// {{ 'garba night' | titlecase }}   -> Garba Night
// {{ 49.5 | currency:'INR' }}       -> ચલણ પ્રમાણે ગોઠવેલી ફી
// {{ today | date:'dd/MM/yyyy' }}    -> 12/07/2026

// 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';
  }
}
// Template માં આ રીતે વપરાય:  {{ event.seats | seatsLabel }}
//   350 -> "350 seats left"   0 -> "Sold out"

📖 Theory

પોતાનો pipe લખવો

અંદરથી મળતો કોઈ pipe બંધ ન બેસે ત્યારે તમારો પોતાનો લખો:

• એવો class જેને @Pipe({ name: 'seatsLabel' }) થી ચિહ્નિત કર્યો હોય
• અને જે PipeTransform લાગુ કરતો હોય તથા transform(value, ...args) method ધરાવતો હોય, જે બદલેલી કિંમત પાછી આપે

પછી એને template માં બીજા કોઈ pipe ની જેમ જ વાપરો: {{ event.seats | seatsLabel }}. ઉપરનો custom pipe બેઠકોની સંખ્યાને મૈત્રીપૂર્ણ લેબલમાં ('350 seats left' કે 'Sold out') ફેરવે છે, અને એ પણ ફક્ત દેખાવ પૂરતું.

React સાથે સરખાવીએ: React માં pipe જેવી syntax નથી; ત્યાં તમે સાદું JavaScript function બોલાવો કે JSX માં expression લખો ({seatsLabel(event.seats)}). Angular નું pipe ઘોષણાત્મક છે, ફરી વાપરી શકાય એવું ગોઠવણનું સાધન છે જે template ની ભાષામાં જ વણાયેલું છે, વારંવારની ગોઠવણ માટે વધુ સ્વચ્છ છે, અને Angular ની આગવી ઓળખ છે.

🧩 Quiz

{{ price | currency }} જેવી ગોઠવણ કરતી વખતે pipe નીચેના data નું શું કરે છે?

1. એ સંઘરાયેલી price ને કાયમ માટે ગોઠવેલી string માં ફેરવી નાખે છે
2. કંઈ જ નહીં: pipe કિંમતને ફક્ત બતાવવા પૂરતી બદલે છે; નીચેનો data એમનો એમ રહે છે
3. એ મૂળ કિંમત ભૂંસી નાખે છે
4. એ કિંમતને નવા ચલમાં ખસેડી દે છે

💭 Think first

સીધું 'Rs 49.50' જ કેમ ન સંઘરવું?

ફી ને 'Rs 49.50' string તરીકે સંઘરીને સીધી બતાવી દેવી સહેલી પડે. તો કાચી સંખ્યા 49.5 રાખવી અને currency pipe વાપરવો એ વધુ સારી રચના કેમ છે? વિચારીને પછી tap કરો.

⚠️ Watch out

Pipe ના ફાંદા

ગોઠવેલી strings સંઘરવી: કાચો data (સંખ્યાઓ, તારીખો) સાચવો; અને દેખાવ માટે pipes થી ગોઠવો.

Pipe data બદલશે એવી અપેક્ષા: pipes ફક્ત દેખાવ પૂરતાં છે; મૂળ કિંમત બદલાતી નથી.

PipeTransform વગરનો custom pipe: PipeTransform લાગુ કરો અને transform() method લખો, નહીં તો એ ચાલશે નહીં.

ખોટી pipe દલીલો: દલીલો colon પછી આવે છે ({{ x | date:'short' }}); દરેક pipe ને કઈ દલીલો જોઈએ એ તપાસો.

Pipe માં ભારે કામ: pipes change detection વખતે ચાલે છે; એટલે transform() ને હળવું રાખો.

📖 Theory

દેખાવ સુઘડ; હવે input બરાબર ઝીલો

FestConnect જે બતાવે છે એને pipes ગોઠવે છે. બીજો અડધો ભાગ એ છે કે એ શું ભેગું કરે છે: forms. Angular forms માટે બે રીતો આપે છે, એટલે કે template-driven (સાદી, ngModel વાળી) અને reactive (શક્તિશાળી, class માં વ્યાખ્યાયિત), ઉપરાંત ચકાસણી. પછીનો પાઠ બંને આવરી લે છે અને કઈ ક્યારે વાપરવી એ પણ. પછી Angular નો છેલ્લો પાઠ, એટલે કે HttpClient સાથે services અને dependency injection, FestConnect ને ખરા REST API સાથે જોડે છે. હવે forms.

✅ Summary

Key takeaways

• Pipe કિંમતને ફક્ત બતાવવા પૂરતી બદલે છે (| operator દ્વારા); નીચેનો data એમનો એમ રહે છે.
• Syntax: {{ value | pipeName }}; દલીલો colon પછી ({{ fee | currency:'INR' }}); અને pipes સાંકળી શકાય છે.
• અંદરથી મળતા pipes: uppercase, lowercase, titlecase, date, currency, percent, slice, json અને async.
• Custom pipe: @Pipe({name}) વાળો class જે PipeTransform લાગુ કરે અને એની transform(value, ...args) method લખે.
• પહેલેથી ગોઠવેલી strings સંઘરવાને બદલે કાચો data (સંખ્યાઓ, તારીખો) સાચવો અને pipes થી ગોઠવો.
• Data ને presentation થી અલગ રાખવાથી કિંમતો ગણતરીલાયક રહે છે અને દેખાવ સુઘડ રહે છે.
• યાદ રાખવાની કડી: pipes | વડે આંખ માટે ગોઠવે છે, અને data ને કદી અડતાં નથી.