Built-in Pipes

Angular ships with a rich set of built-in pipes from the @angular/common package. These cover the most common data transformation needs: formatting dates, numbers, currencies, text case, and working with collections.

All built-in pipes are available by importing CommonModule in a module-based app, or by importing individual pipe classes in standalone components.

Text Pipes

UpperCasePipe / LowerCasePipe / TitleCasePipe

Simple text-case transformation pipes:

HTML

{{ 'hello world' | uppercase }}   <!-- HELLO WORLD -->
{{ 'HELLO WORLD' | lowercase }}   <!-- hello world -->
{{ 'hello world' | titlecase }}   <!-- Hello World -->

<!-- TitleCase is smart about small words -->
{{ 'the quick brown fox' | titlecase }}  <!-- The Quick Brown Fox -->

The DatePipe

DatePipe is one of the most feature-rich built-in pipes. It formats a Date object, a number (milliseconds since epoch), or an ISO 8601 date string.

Syntax: {{ value | date: format : timezone : locale }}

Predefined format shortcuts:

Format Token	Example Output
'short'	1/15/24, 9:30 AM
'medium'	Jan 15, 2024, 9:30:00 AM
'long'	January 15, 2024 at 9:30:00 AM GMT+0
'full'	Monday, January 15, 2024 at 9:30:00 AM GMT
'shortDate'	1/15/24
'mediumDate'	Jan 15, 2024
'longDate'	January 15, 2024
'fullDate'	Monday, January 15, 2024
'shortTime'	9:30 AM
'mediumTime'	9:30:00 AM

HTML

<!-- Custom format tokens -->
{{ today | date: 'yyyy-MM-dd' }}          <!-- 2024-01-15 -->
{{ today | date: 'dd/MM/yyyy HH:mm' }}    <!-- 15/01/2024 09:30 -->
{{ today | date: 'EEEE, MMMM d, y' }}     <!-- Monday, January 15, 2024 -->
{{ today | date: 'h:mm a' }}              <!-- 9:30 AM -->

<!-- With timezone offset -->
{{ today | date: 'medium' : 'UTC' }}
{{ today | date: 'shortTime' : '+0530' }}  <!-- India Standard Time -->

Note

DatePipe depends on the locale data loaded in your app. Angular loads only en-US by default. To use other locales, register them with registerLocaleData() in your app config.

The NumberPipe (DecimalPipe)

NumberPipe (used as number in templates) formats numbers with configurable decimal places and grouping separators.

Syntax: {{ value | number: 'minIntegerDigits.minFractionDigits-maxFractionDigits' }}

HTML

{{ 1234.567 | number }}              <!-- 1,234.567 -->
{{ 1234.567 | number: '1.0-0' }}     <!-- 1,235 (rounded, no decimals) -->
{{ 1234.567 | number: '1.2-2' }}     <!-- 1,234.57 (exactly 2 decimals) -->
{{ 0.1234 | number: '1.1-4' }}       <!-- 0.1234 -->
{{ 42 | number: '3.0-0' }}           <!-- 042 (minimum 3 integer digits) -->

The CurrencyPipe

CurrencyPipe formats a number as currency with a locale-aware symbol.

Syntax: {{ value | currency: currencyCode : display : digitsInfo : locale }}

HTML

{{ 1234.56 | currency }}                          <!-- $1,234.56 (default USD) -->
{{ 1234.56 | currency: 'EUR' }}                    <!-- EUR1,234.56 -->
{{ 1234.56 | currency: 'EUR' : 'symbol' }}         <!-- EUR1,234.56 -->
{{ 1234.56 | currency: 'GBP' : 'symbol' : '1.0-0' }}  <!-- GBP1,235 -->

<!-- display options: 'code', 'symbol', 'symbol-narrow', custom string -->
{{ 1234.56 | currency: 'USD' : 'code' }}           <!-- USD1,234.56 -->
{{ 1234.56 | currency: 'USD' : 'US$' }}            <!-- US$1,234.56 -->

The PercentPipe

HTML

{{ 0.25 | percent }}              <!-- 25% -->
{{ 0.1234 | percent: '1.1-2' }}   <!-- 12.34% -->
{{ 1.5 | percent }}               <!-- 150% -->
{{ 0.001 | percent: '1.2-3' }}    <!-- 0.100% -->

The SlicePipe

SlicePipe creates a new array or string containing a subset of the elements. It works exactly like JavaScript's .slice() method.

HTML

<!-- Arrays -->
{{ [1, 2, 3, 4, 5] | slice: 1 : 4 }}     <!-- 2,3,4 -->
{{ [1, 2, 3, 4, 5] | slice: 2 }}          <!-- 3,4,5 -->
{{ [1, 2, 3, 4, 5] | slice: -2 }}         <!-- 4,5 -->

<!-- Strings -->
{{ 'Hello World' | slice: 0 : 5 }}        <!-- Hello -->
{{ 'Hello World' | slice: -5 }}           <!-- World -->

<!-- Useful for "show first N items" pattern -->
@for (item of items | slice: 0 : pageSize; track item.id) {
  <div>{{ item.name }}</div>
}

Warning

SlicePipe is impure — it runs on every change detection cycle. For large lists, consider slicing in the component and binding to a derived property instead.

The JsonPipe

JsonPipe converts a value to a JSON string using JSON.stringify(). It is invaluable during development for debugging component state:

HTML

<!-- Debug component state -->
<pre>{{ user | json }}</pre>

<!-- Output:
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com"
}
-->

<!-- Works on any value -->
<pre>{{ complexObject | json }}</pre>

Tip

Wrap JsonPipe output in a <pre> tag to preserve whitespace formatting. Remove it before production.

The KeyValuePipe

KeyValuePipe transforms an object or a Map into an array of { key, value } pairs, which you can then iterate with @for:

HTML

<!-- Object iteration -->
@for (entry of config | keyvalue; track entry.key) {
  <div>{{ entry.key }}: {{ entry.value }}</div>
}

<!-- Map iteration -->
@for (entry of myMap | keyvalue; track entry.key) {
  <p>{{ entry.key }} =&gt; {{ entry.value }}</p>
}

<!-- Custom sort comparator -->
@for (entry of obj | keyvalue: compareFn; track entry.key) {
  <li>{{ entry.key }}</li>
}

import { KeyValue } from '@angular/common';

export class AppComponent {
  config = {
    theme: 'dark',
    language: 'en',
    fontSize: 16,
  };

  // Sort by value descending
  compareFn = (
    a: KeyValue<string, unknown>,
    b: KeyValue<string, unknown>
  ): number => String(b.value).localeCompare(String(a.value));
}

The AsyncPipe

The AsyncPipe subscribes to an Observable or resolves a Promise and returns the latest emitted value. It automatically unsubscribes when the component is destroyed, preventing memory leaks.

See the dedicated Async Pipe page for a full deep-dive. A quick preview:

HTML

<!-- Subscribe to an Observable -->
<p>{{ user$ | async }}</p>

<!-- With null-check pattern -->
@if (user$ | async; as user) {
  <p>Welcome, {{ user.name }}</p>
}

I18nPluralPipe and I18nSelectPipe

These pipes handle internationalization patterns elegantly without ngSwitch clutter.

export class NotificationsComponent {
  count = 3;
  pluralMapping: { [k: string]: string } = {
    '=0': 'No notifications',
    '=1': 'One notification',
    'other': '# notifications',
  };
  gender = 'female';
}

HTML

<!-- I18nPluralPipe -->
{{ count | i18nPlural: pluralMapping }}
<!-- count=0  --> No notifications
<!-- count=1  --> One notification
<!-- count=3  --> 3 notifications

<!-- I18nSelectPipe — like a switch statement -->
{{ gender | i18nSelect: { 'male': 'he', 'female': 'she', 'other': 'they' } }}

Complete Built-in Pipes Reference

Pipe	Class	Pure?
uppercase	UpperCasePipe	Yes
lowercase	LowerCasePipe	Yes
titlecase	TitleCasePipe	Yes
date	DatePipe	Yes
number	DecimalPipe	Yes
currency	CurrencyPipe	Yes
percent	PercentPipe	Yes
slice	SlicePipe	No
json	JsonPipe	No
keyvalue	KeyValuePipe	No
async	AsyncPipe	No
i18nPlural	I18nPluralPipe	Yes
i18nSelect	I18nSelectPipe	Yes

Importing Built-in Pipes in Standalone Components

import { Component } from '@angular/core';
import {
  DatePipe,
  CurrencyPipe,
  DecimalPipe,
  UpperCasePipe,
  SlicePipe,
  AsyncPipe,
  JsonPipe,
  KeyValuePipe,
} from '@angular/common';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    DatePipe,
    CurrencyPipe,
    DecimalPipe,
    UpperCasePipe,
    SlicePipe,
    AsyncPipe,
  ],
  template: `
    <h1>{{ title | uppercase }}</h1>
    <p>{{ price | currency: 'USD' }}</p>
    <p>{{ today | date: 'longDate' }}</p>
  `,
})
export class DashboardComponent {
  title = 'Sales Report';
  price = 4999.99;
  today = new Date();
}

Summary

Angular's built-in pipes cover most everyday formatting needs:

Text: uppercase, lowercase, titlecase
Numbers: number, currency, percent
Dates: date with rich format tokens
Collections: slice, keyvalue
Debugging: json
Async: async for Observables and Promises
i18n: i18nPlural, i18nSelect

For custom transformations not covered by built-in pipes, read on to Custom Pipes.