Default: {{ orderDate | date }}
Short: {{ orderDate | date: 'shortDate' }}
Custom: {{ orderDate | date: 'dd MMM yyyy' }}
Full: {{ orderDate | date: 'fullDate' }}
`, }) export class App { orderDate = new Date(2026, 2, 15); } ``` Common pattern letters are `dd` (day), `MMM` (short month name), `MM` (month number), `yyyy` (year), `HH:mm` (24-hour time) and `h:mm a` (12-hour time). ### CurrencyPipe `CurrencyPipe` formats a number as money. The first parameter is the ISO currency code, such as `'INR'`, `'USD'` or `'EUR'`. ```angular runnable title="CurrencyPipe formats prices in different currencies" import { Component } from '@angular/core'; import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-root', imports: [CurrencyPipe], template: `Default: {{ price | currency }}
Rupees: {{ price | currency: 'INR' }}
Euros: {{ price | currency: 'EUR' }}
No decimals: {{ price | currency: 'INR' : 'symbol' : '1.0-0' }}
`, }) export class App { price = 54999; } ``` ### DecimalPipe `DecimalPipe`, used as `number`, adds thousands separators and controls decimal places. Its parameter has the form `'minInteger.minFraction-maxFraction'`. ```angular runnable title="DecimalPipe controls separators and decimal places" import { Component } from '@angular/core'; import { DecimalPipe } from '@angular/common'; @Component({ selector: 'app-root', imports: [DecimalPipe], template: `Page views: {{ views | number }}
Rating: {{ rating | number: '1.1-1' }}
Distance: {{ distance | number: '1.2-2' }} km
`, }) export class App { views = 1284503; rating = 4.4666; distance = 7.5; } ``` `'1.2-2'` means: at least 1 digit before the decimal point, and exactly 2 digits after it. ### PercentPipe `PercentPipe` multiplies a number by 100 and adds a percent sign. It accepts the same digit format as `DecimalPipe`. ```angular runnable title="PercentPipe turns ratios into percentages" import { Component } from '@angular/core'; import { PercentPipe } from '@angular/common'; @Component({ selector: 'app-root', imports: [PercentPipe], template: `Conversion rate: {{ conversion | percent }}
Test coverage: {{ coverage | percent: '1.1-1' }}
`, }) export class App { conversion = 0.256; coverage = 0.8734; } ``` ### UpperCasePipe, LowerCasePipe and TitleCasePipe These three pipes change the letter case of text. - `uppercase` changes every letter to a capital letter. - `lowercase` changes every letter to a small letter. - `titlecase` capitalises the first letter of each word. ```angular runnable title="Case pipes normalise text from an API" import { Component } from '@angular/core'; import { LowerCasePipe, TitleCasePipe, UpperCasePipe } from '@angular/common'; @Component({ selector: 'app-root', imports: [UpperCasePipe, LowerCasePipe, TitleCasePipe], template: `Coupon code: {{ coupon | uppercase }}
Email: {{ email | lowercase }}
Status: {{ status | titlecase }}
`, }) export class App { coupon = 'save20now'; email = 'Asha.Kumar@Example.COM'; status = 'out for delivery'; } ``` ### JsonPipe `JsonPipe` converts an object to formatted JSON text. Developers use it to inspect data while debugging a template. ```angular runnable title="JsonPipe prints an object for debugging" import { Component } from '@angular/core'; import { JsonPipe } from '@angular/common'; @Component({ selector: 'app-root', imports: [JsonPipe], template: `{{ user | json }}`,
})
export class App {
user = { id: 42, name: 'Ravi', roles: ['editor', 'reviewer'] };
}
```
Wrap `json` output in a `` element. `` keeps the line breaks and indentation, so nested objects stay readable.
## Chaining Pipes
You can apply several pipes to one value by writing them one after another. This is called **chaining**. Angular runs the pipes from left to right, and each pipe receives the output of the previous one.
```angular runnable title="Chained pipes run from left to right"
import { Component } from '@angular/core';
import { DatePipe, UpperCasePipe } from '@angular/common';
@Component({
selector: 'app-root',
imports: [DatePipe, UpperCasePipe],
template: `
Delivery: {{ deliveryDate | date: 'EEEE, d MMMM' | uppercase }}
`,
})
export class App {
deliveryDate = new Date(2026, 2, 18);
}
```
First `date` produces `Wednesday, 18 March`. Then `uppercase` produces `WEDNESDAY, 18 MARCH`.
The order matters. `{{ name | uppercase | slice: 0 : 3 }}` is valid, but putting a date pipe after `uppercase` fails, because `uppercase` returns text that is no longer a date.
## Pipe Parameters
A **pipe parameter** changes how a pipe formats its value. You write a colon after the pipe name, then the parameter value. Separate several parameters with more colons.
```html
{{ value | pipeName : parameter1 : parameter2 }}
```
| Example | Pipe | Parameters |
|---|---|---|
| `{{ d \| date: 'shortTime' }}` | `date` | format |
| `{{ p \| currency: 'INR' : 'code' }}` | `currency` | currency code, display style |
| `{{ n \| number: '1.0-2' }}` | `number` | digit format |
| `{{ text \| slice: 0 : 20 }}` | `slice` | start index, end index |
Parameters can also be expressions from the class, such as `{{ price | currency: selectedCurrency }}`. When `selectedCurrency` changes, the pipe runs again.
## Custom Pipes
A **custom pipe** is your own formatting function, packaged so every template can use it.
You create one with the `@Pipe` decorator and a class that has a `transform` method. Angular calls `transform` with the value from the left side of `|`, followed by any parameters. In a project, the CLI creates the file for you:
```bash
ng generate pipe file-size
```
```angular runnable title="A custom pipe formats file sizes"
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'fileSize' })
export class FileSizePipe implements PipeTransform {
transform(bytes: number, decimals: number = 1): string {
if (bytes < 1024) return bytes + ' B';
const units = ['KB', 'MB', 'GB'];
let size = bytes / 1024;
let unit = 0;
while (size >= 1024 && unit < units.length - 1) {
size = size / 1024;
unit++;
}
return size.toFixed(decimals) + ' ' + units[unit];
}
}
@Component({
selector: 'app-root',
imports: [FileSizePipe],
template: `
@for (file of files; track file.name) {
{{ file.name }}: {{ file.bytes | fileSize }}
}
Precise: {{ 5368709120 | fileSize: 2 }}
`,
})
export class App {
files = [
{ name: 'notes.txt', bytes: 820 },
{ name: 'photo.jpg', bytes: 2457600 },
{ name: 'backup.zip', bytes: 1610612736 },
];
}
```
A custom pipe has three parts:
1. `@Pipe({ name: 'fileSize' })` sets the name used in templates.
2. `implements PipeTransform` declares that the class has a `transform` method.
3. `transform(value, ...params)` returns the formatted result.
Custom pipes are **pure** by default. Angular runs a pure pipe again only when its input value or a parameter changes. This keeps templates fast. Keep `transform` free of side effects, so the same input always gives the same output.
## Common Mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Pipe not imported | `NG0302: The pipe 'date' could not be found` | Add `DatePipe` (or the pipe you use) to `imports` |
| Using the class name in the template | `{{ d \| DatePipe }}` is not found | Use the template name: `{{ d \| date }}` |
| Spaces in the digit format | `'1.2 - 2'` causes a format error | Write it without spaces: `'1.2-2'` |
| `percent` on a whole number | `25` shows as `2,500%` | Pass a ratio: `0.25` |
| Chaining in the wrong order | A pipe receives text it cannot read | Put pipes that need raw values first |
| Formatting in the class instead | Duplicated formatting code in many components | Move the formatting into a pipe |
## Check Yourself
## Exercises
## What to Remember
- A pipe formats a value for display with `{{ value | pipe }}` and leaves the class data unchanged.
- Built-in pipes cover dates, currency, numbers, percentages, letter case and JSON. Pass settings with `:` and chain pipes from left to right.
- A custom pipe is a class with `@Pipe` and a `transform` method.
Next: **Event Handling**, how to respond to clicks, key presses and form changes.