Pipes

Learning objectives#

• Use built-in pipes with arguments
• Chain pipes
• Use the async and json pipes
• Write a custom pipe and understand pure pipes

Explanation#

Built-in pipes from @angular/common: date, currency, number (decimal), percent, uppercase, lowercase, titlecase, slice, json, keyvalue and async. Import the ones you use.

Arguments follow colons: {{ price | currency:'INR':'symbol':'1.0-0' }}, {{ when | date:'d MMM y, h:mm a' }}.

Chain pipes left to right: {{ name | slice:0:10 | uppercase }}.

async subscribes to an Observable or Promise and shows the latest value, unsubscribing automatically. json is great for debugging: {{ data | json }}.

Custom pipes implement PipeTransform with a transform(value, ...args) method. Pipes are pure by default: they re-run only when the input reference changes, which keeps them fast.

Syntax#

1{{ total | currency:'INR' }}
2{{ createdAt | date:'mediumDate' }}
3{{ 0.256 | percent:'1.0-1' }}
4{{ title | titlecase }}
5{{ orders$ | async }}

Code example: Built-in pipes and a custom "time ago" pipe#

1import { Component, Pipe, PipeTransform } from '@angular/core';
2import { CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, SlicePipe, TitleCasePipe } from '@angular/common';
3

4@Pipe({ name: 'timeAgo' })
5export class TimeAgoPipe implements PipeTransform {
6  transform(value: Date, now: Date = new Date()): string {
7    const minutes = Math.floor((now.getTime() - value.getTime()) / 60000);
8    if (minutes < 1) return 'just now';
9    if (minutes < 60) return `${minutes} min ago`;
10    const hours = Math.floor(minutes / 60);
11    if (hours < 24) return `${hours} h ago`;
12    return `${Math.floor(hours / 24)} d ago`;
13  }
14}
15

16@Component({
17  selector: 'app-order-row',
18  imports: [CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, SlicePipe, TitleCasePipe, TimeAgoPipe],
19  template: `
20    <p>{{ customer | titlecase }}</p>
21    <p>{{ total | currency: 'INR' }} · {{ total | currency: 'INR' : 'symbol' : '1.0-0' }}</p>
22    <p>Weight: {{ weightKg | number: '1.1-2' }} kg</p>
23    <p>Discount: {{ discount | percent }}</p>
24    <p>Placed {{ placedAt | date: 'd MMM y, h:mm a' }} ({{ placedAt | timeAgo: now }})</p>
25    <p>{{ notes | slice: 0 : 20 }}…</p>
26  `,
27})
28export class OrderRow {
29  customer = 'asha rao';
30  total = 1499.5;
31  weightKg = 2.3456;
32  discount = 0.15;
33  now = new Date(2026, 9, 28, 12, 0);
34  placedAt = new Date(2026, 9, 28, 9, 30);
35  notes = 'Please deliver after 6 pm, call before arriving';
36}

Asha Rao
₹1,499.50 · ₹1,500
Weight: 2.35 kg
Discount: 15%
Placed 28 Oct 2026, 9:30 AM (2 h ago)
Please deliver after…

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. titlecase capitalises each word of the name.
2. currency formats with the ₹ symbol; the digits argument 1.0-0 rounds to whole rupees.
3. number:"1.1-2" shows 1 to 2 decimal places; percent turns 0.15 into 15%.
4. date formats with a pattern; the custom timeAgo pipe receives an extra argument (now).
5. slice cuts the notes to 20 characters.
6. Every pipe used is listed in the component’s imports.

Real-world use case#

Common mistakes#

Best practices#

• Format in templates with pipes, not in services
• Keep custom pipes pure and fast
• Use async to avoid manual subscriptions
• Set the locale for correct formats

Remember this#

Practice exercise#

1import { Component, Pipe, PipeTransform } from '@angular/core';
2

3@Pipe({ name: 'initials' })
4export class InitialsPipe implements PipeTransform {
5  transform(value: string): string {
6    return value.split(' ').filter(Boolean).map(w => w[0]).join('').toUpperCase();
7  }
8}
9

10@Component({
11  selector: 'app-avatar',
12  imports: [InitialsPipe],
13  template: `<span class="avatar">{{ name | initials }}</span>`,   // AR
14})
15export class Avatar {
16  name = 'Asha Rao';
17}

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.