Chapter 4.3☕ 15 min read

Built-in Pipes

Pipes transform data in templates — formatting dates, currencies, and more.

01What is a Pipe

Pipes transform data in the template before displaying it to the user.

"Pipe = filter — data ko pipe se guzaro, clean formatted data niklo." Just like a water filter transforms dirty water to clean water, a pipe transforms raw data to formatted data.

Syntax: {{ value | pipeName }}

You can chain pipes: {{ value | pipe1 | pipe2 }} — output of pipe1 becomes input of pipe2.

Angular comes with many built-in pipes. Let's explore the most useful ones.

02DatePipe — Format Dates

DatePipe formats JavaScript Date objects:

{{ today | date }} → Jan 15, 2025\n{{ today | date:'shortDate' }} → 1/15/25\n{{ today | date:'mediumDate' }} → Jan 15, 2025\n{{ today | date:'fullDate' }} → Wednesday, January 15, 2025\n{{ today | date:'shortTime' }} → 10:30 AM\n{{ today | date:'dd/MM/yyyy' }} → 15/01/2025\n{{ today | date:'dd/MM/yyyy HH:mm' }} → 15/01/2025 10:30

Custom format codes: dd=day, MM=month, yyyy=year, HH=hours, mm=minutes.

"DatePipe = calendar — kaise bhi date dikhana ho, format do."

Important: DatePipe shows dates in the browser's local timezone by default.

03CurrencyPipe, NumberPipe, PercentPipe

CurrencyPipe formats numbers as currency:

{{ 500 | currency:'INR' }} → ₹500.00\n{{ 500 | currency:'INR':'symbol-narrow' }} → ₹500.00\n{{ 500 | currency:'USD':'symbol' }} → $500.00\n{{ 500 | currency:'EUR':'code' }} → EUR 500.00

DecimalPipe (NumberPipe):

{{ 100000 | number }} → 1,00,000 (Indian formatting!)\n{{ 3.14159 | number:'1.2-3' }} → 3.142\n// Format: minIntegerDigits.minFractionDigits-maxFractionDigits

PercentPipe:

{{ 0.2 | percent }} → 20%\n{{ 0.1234 | percent:'1.2-2' }} → 12.34%

"NumberPipe = Indian counting — lakh, crore format free mein."

04UpperCasePipe, LowerCasePipe, TitleCasePipe

UpperCasePipe, LowerCasePipe, TitleCasePipe — simple string transformations:

{{ 'hyderabad' | uppercase }} → HYDERABAD\n{{ 'ANGULAR' | lowercase }} → angular\n{{ 'hYDERABAD bIRYANI' | titlecase }} → Hyderabad Biryani

SlicePipe — extract a portion of an array or string:

{{ 'Hello World' | slice:0:5 }} → Hello\n{{ items | slice:0:3 }} → first 3 items

JsonPipe — convert object to JSON string (useful for debugging):

{{ user | json }} → { "name": "Raj", "age": 25 }

KeyValuePipe — iterate over object properties:

@for (item of obj | keyvalue; track item.key) {\n  {{ item.key }}: {{ item.value }}\n}

05AsyncPipe — Unsubscribe Automatically

AsyncPipe is the most powerful pipe — it subscribes to an Observable or Promise automatically and unsubscribes on component destroy:

// Component: order$ = this.http.get('/api/order');\n// Template:\n{{ order$ | async }}  →  Subscribes, shows data, auto-unsubscribes!

"AsyncPipe = automatic maid — khud subscribe karo, khud clean karo."

Benefits:

✅ Automatically subscribes when component loads
✅ Automatically unsubscribes when component destroys (no memory leaks!)
✅ Works with Observable, Promise, and Signal

Common pattern with @if:

@if (data$ | async; as data) {\n  <p>{{ data.name }}</p>\n}

This subscribes once, assigns the value to the data variable, and shows it.

Key Takeaways

✅ Pipes transform data in templates — {{ value | pipeName }}.
✅ DatePipe formats dates, CurrencyPipe formats money, NumberPipe formats numbers.
✅ UpperCasePipe, LowerCasePipe, TitleCasePipe transform strings.
✅ SlicePipe extracts array/string portions; JsonPipe helps debug.
✅ AsyncPipe auto-subscribes and auto-unsubscribes — no memory leaks!

Previous4.2 — Custom Structural Directives 📋 All Chapters Next Chapter4.4 — Custom Pipes →