🔧 Pipes

Transform data in templates — built-in pipes and custom pipes

About This Feature

Pipes transform data for display in templates using the | operator. Angular ships with many built-in pipes. You can also create custom pipes by implementing PipeTransform. The async pipe automatically subscribes to Observables/Promises and handles cleanup.

Code Example

// Built-in pipes (no import needed in templates if CommonModule is used)
{{ '{{' }} today | date:'fullDate' {{ '}}' }}
// → Thursday, March 14, 2024

{{ '{{' }} 1234567.89 | currency:'USD' {{ '}}' }}
// → $1,234,567.89

{{ '{{' }} 9876543.21 | number:'1.2-2' {{ '}}' }}
// → 9,876,543.21

{{ '{{' }} 'hello world' | titlecase {{ '}}' }}
// → Hello World

{{ '{{' }} 0.7531 | percent:'1.1-1' {{ '}}' }}
// → 75.3%

{{ '{{' }} ['a','b','c','d'] | slice:1:3 {{ '}}' }}
// → ['b', 'c']

// Async pipe — subscribes & unsubscribes automatically
{{ '{{' }} observable$ | async {{ '}}' }}

// Custom pipe
@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 50, ellipsis = '...'): string {
    if (value.length <= limit) return value;
    return value.slice(0, limit) + ellipsis;
  }
}

// Usage: {{ '{{' }} text | truncate:30:'…' {{ '}}' }}

Live Demo

Pipe	Input	Output
`date:'fullDate'`	`new Date()`	Saturday, March 21, 2026
`date:'shortTime'`	`new Date()`	1:24 PM
`currency:'USD'`	`1234567.89`	$1,234,567.89
`currency:'EUR':'symbol-narrow'`	`1234567.89`	€1,234,567.89
`number:'1.2-2'`	`9876543.21`	9,876,543.21
`percent:'1.1-1'`	`0.7531`	75.3%
`uppercase`	`the quick brown…`	THE QUICK BROWN…
`titlecase`	`the quick brown fox …`	The Quick Brown Fox …
`slice:1:4`	`[ "Angular", "React", "Vue", "Svelte", "Solid", "Qwik" ]`	[ "React", "Vue", "Svelte" ]
`json`	object	`{ "framework": "Angular", "version": 17, "standalone": true }`
`async`	Observable (1.5s delay)	Loaded from async pipe!

Custom truncate Pipe

Limit: 50 chars

Original (101 chars):

This is a long string that will be truncated using our custom TruncatePipe when it exceeds the limit.

With truncate:50:

This is a long string that will be truncated using...