Common Pipes

Angular’s @angular/common package provides essential pipes for transforming and formatting data in your templates. Pipes are pure functions that transform data for display without modifying the original data.

Date and Time

DatePipe

Formats a date value according to locale rules.

Syntax
Examples
Format Options
Configuration

@Pipe({
  name: 'date'
})
export class DatePipe implements PipeTransform {
  transform(
    value: Date | string | number | null | undefined,
    format?: string,
    timezone?: string,
    locale?: string
  ): string | null;
}

<!-- Default format (mediumDate) -->
{{ dateObj | date }}  <!-- Jun 15, 2015 -->

<!-- Predefined formats -->
{{ dateObj | date:'short' }}       <!-- 6/15/15, 9:03 AM -->
{{ dateObj | date:'medium' }}      <!-- Jun 15, 2015, 9:03:01 AM -->
{{ dateObj | date:'long' }}        <!-- June 15, 2015 at 9:03:01 AM GMT+1 -->
{{ dateObj | date:'full' }}        <!-- Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 -->

{{ dateObj | date:'shortDate' }}   <!-- 6/15/15 -->
{{ dateObj | date:'mediumDate' }}  <!-- Jun 15, 2015 -->
{{ dateObj | date:'longDate' }}    <!-- June 15, 2015 -->
{{ dateObj | date:'fullDate' }}    <!-- Monday, June 15, 2015 -->

{{ dateObj | date:'shortTime' }}   <!-- 9:03 AM -->
{{ dateObj | date:'mediumTime' }}  <!-- 9:03:01 AM -->
{{ dateObj | date:'longTime' }}    <!-- 9:03:01 AM GMT+1 -->
{{ dateObj | date:'fullTime' }}    <!-- 9:03:01 AM GMT+01:00 -->

<!-- Custom formats -->
{{ dateObj | date:'yyyy-MM-dd' }}                    <!-- 2015-06-15 -->
{{ dateObj | date:'MMM dd, yyyy' }}                  <!-- Jun 15, 2015 -->
{{ dateObj | date:'h:mm a' }}                        <!-- 9:03 AM -->
{{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }}    <!-- Jun 15, 2015 at 09:03 AM -->

<!-- With timezone -->
{{ dateObj | date:'medium':'+0000' }}  <!-- UTC -->
{{ dateObj | date:'short':'-0700' }}   <!-- PST -->

<!-- With locale -->
{{ dateObj | date:'full':'':'fr' }}    <!-- French locale -->

Common format symbols:

Symbol	Meaning	Example
`yyyy`	4-digit year	2015
`yy`	2-digit year	15
`MMMM`	Month name	June
`MMM`	Short month	Jun
`MM`	Month number (padded)	06
`M`	Month number	6
`dd`	Day (padded)	15
`d`	Day	15
`EEEE`	Day of week	Monday
`EEE`	Short day	Mon
`HH`	Hour 0-23 (padded)	09
`H`	Hour 0-23	9
`hh`	Hour 1-12 (padded)	09
`h`	Hour 1-12	9
`mm`	Minute (padded)	03
`m`	Minute	3
`ss`	Second (padded)	05
`s`	Second	5
`a`	AM/PM	AM
`z`	Timezone	GMT+1
`Z`	Timezone offset	+0100

import { DATE_PIPE_DEFAULT_OPTIONS, DatePipeConfig } from '@angular/common';

// Configure default options
@NgModule({
  providers: [
    {
      provide: DATE_PIPE_DEFAULT_OPTIONS,
      useValue: {
        dateFormat: 'shortDate',
        timezone: '-0700'
      } as DatePipeConfig
    }
  ]
})
export class AppModule {}

Import:

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

Source: packages/common/src/pipes/date_pipe.ts:224

Only the en-US locale data comes with Angular by default. To format dates in other languages, you must import the corresponding locale data.

Number Formatting

CurrencyPipe

Transforms a number to a currency string, formatted according to locale rules.

Syntax
Examples
Component

@Pipe({
  name: 'currency'
})
export class CurrencyPipe implements PipeTransform {
  transform(
    value: number | string | null | undefined,
    currencyCode?: string,
    display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean,
    digitsInfo?: string,
    locale?: string
  ): string | null;
}

<!-- Default (USD with symbol) -->
{{ amount | currency }}  <!-- $123.45 -->

<!-- Different currencies -->
{{ amount | currency:'EUR' }}  <!-- €123.45 -->
{{ amount | currency:'GBP' }}  <!-- £123.45 -->
{{ amount | currency:'JPY' }}  <!-- ¥123 -->

<!-- Display options -->
{{ amount | currency:'USD':'code' }}           <!-- USD123.45 -->
{{ amount | currency:'USD':'symbol' }}         <!-- $123.45 -->
{{ amount | currency:'USD':'symbol-narrow' }}  <!-- $123.45 -->
{{ amount | currency:'USD':'' }}               <!-- 123.45 (no symbol) -->
{{ amount | currency:'USD':'Custom' }}         <!-- Custom123.45 -->

<!-- Digit formatting (minInteger.minFraction-maxFraction) -->
{{ amount | currency:'USD':'symbol':'1.0-0' }}  <!-- $123 -->
{{ amount | currency:'USD':'symbol':'3.2-2' }}  <!-- $123.45 -->
{{ amount | currency:'USD':'symbol':'1.2-4' }}  <!-- $123.4500 -->

<!-- With locale -->
{{ amount | currency:'EUR':'symbol':'1.2-2':'fr' }}  <!-- 123,45 € -->
{{ amount | currency:'USD':'symbol':'1.2-2':'de' }}  <!-- 123,45 $ -->

@Component({
  selector: 'app-price',
  template: `
    <div>
      <p>Price: {{ price | currency:currencyCode }}</p>
      <p>Total: {{ total | currency:currencyCode:'symbol':'1.2-2' }}</p>
    </div>
  `
})
export class PriceComponent {
  price = 99.99;
  total = 259.75;
  currencyCode = 'USD';

  setCurrency(code: string) {
    this.currencyCode = code;
  }
}

Import:

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

Source: packages/common/src/pipes/number_pipe.ts:220

Configure the default currency code using the DEFAULT_CURRENCY_CODE injection token.

Async Data

AsyncPipe

Unwraps a value from an asynchronous primitive (Observable or Promise).

Syntax
Observable Example
Promise Example
With ngIf

@Pipe({
  name: 'async',
  pure: false
})
export class AsyncPipe implements OnDestroy, PipeTransform {
  transform<T>(obj: Observable<T> | Subscribable<T> | PromiseLike<T> | null | undefined): T | null;
}

@Component({
  selector: 'app-example',
  template: `
    <div>
      <h2>Time: {{ time$ | async }}</h2>
      <p>User: {{ user$ | async | json }}</p>
    </div>
  `
})
export class ExampleComponent {
  time$ = interval(1000).pipe(
    map(() => new Date())
  );

  user$ = this.http.get<User>('/api/user');

  constructor(private http: HttpClient) {}
}

@Component({
  selector: 'app-example',
  template: `
    <div>
      <button (click)="resolve()">Resolve</button>
      <p>{{ greeting | async }}</p>
    </div>
  `
})
export class ExampleComponent {
  greeting: Promise<string> | null = null;

  resolve() {
    this.greeting = Promise.resolve('Hello!');
  }
}

<!-- Avoid multiple subscriptions -->
<div *ngIf="user$ | async as user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
  <p>{{ user.role }}</p>
</div>

<!-- Modern syntax -->
@if (user$ | async; as user) {
  <div>
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
}

Import:

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

Source: packages/common/src/pipes/async_pipe.ts:144

The async pipe automatically subscribes and unsubscribes, preventing memory leaks. It marks the component for change detection when new values are emitted.

Key Features:

Automatically subscribes to Observables
Automatically unsubscribes on component destruction
Handles both Observables and Promises
Marks component for change detection on value updates
Returns null until the first value is emitted

Data Transformation

JsonPipe

Converts a value into its JSON-format representation.

Syntax
Examples
Component

@Pipe({
  name: 'json',
  pure: false
})
export class JsonPipe implements PipeTransform {
  transform(value: any): string;
}

<!-- Simple object -->
{{ user | json }}
<!-- Output:
{
  "name": "John",
  "age": 30,
  "email": "john@example.com"
}
-->

<!-- Array -->
{{ items | json }}

<!-- Complex nested structure -->
{{ data | json }}

<!-- Debugging in pre tag -->
<pre>{{ debugData | json }}</pre>

<!-- With async pipe -->
<pre>{{ user$ | async | json }}</pre>

@Component({
  selector: 'app-debug',
  template: `
    <div>
      <h3>Debug Info</h3>
      <pre>{{ data | json }}</pre>
    </div>
  `
})
export class DebugComponent {
  data = {
    user: {
      id: 1,
      name: 'John Doe',
      preferences: {
        theme: 'dark',
        notifications: true
      }
    },
    timestamp: new Date()
  };
}

Import:

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

Source: packages/common/src/pipes/json_pipe.ts:33

The JSON pipe is particularly useful for debugging during development. Use it with the <pre> tag for formatted output.

Additional Pipes

The Common package includes many other useful pipes:

DecimalPipe (number)

Formats numbers according to locale rules.

{{ 3.14159 | number }}              <!-- 3.142 -->
{{ 3.14159 | number:'1.0-0' }}      <!-- 3 -->
{{ 3.14159 | number:'3.1-5' }}      <!-- 003.14159 -->
{{ 1234.56 | number:'1.2-2':'fr' }} <!-- 1 234,56 -->

PercentPipe (percent)

Transforms a number to a percentage string.

{{ 0.26 | percent }}          <!-- 26% -->
{{ 0.26 | percent:'2.2-2' }}  <!-- 26.00% -->
{{ 1.3495 | percent:'2.0-0' }} <!-- 135% -->

SlicePipe (slice)

Creates a new Array or String containing a subset of elements.

{{ [1, 2, 3, 4, 5] | slice:1:3 }}     <!-- [2, 3] -->
{{ 'abcdefg' | slice:0:3 }}           <!-- 'abc' -->
{{ items | slice:0:5 }}               <!-- First 5 items -->

KeyValuePipe (keyvalue)

Transforms Object or Map into an array of key-value pairs.

<div *ngFor="let item of object | keyvalue">
  {{ item.key }}: {{ item.value }}
</div>

Case Conversion Pipes

Transform text case:

{{ 'hello' | uppercase }}     <!-- HELLO -->
{{ 'WORLD' | lowercase }}     <!-- world -->
{{ 'john doe' | titlecase }}  <!-- John Doe -->

I18n Pipes

Internationalization pipes:

I18nPluralPipe - Maps a value to a string that pluralizes the value
I18nSelectPipe - Maps a string value to another string

Usage Patterns

Chaining Pipes

Pipes can be chained together:

{{ user$ | async | json }}
{{ dateValue | date:'short' | uppercase }}
{{ price | currency:'USD' | slice:0:5 }}

Parameterized Pipes

Many pipes accept parameters:

{{ value | pipeName:parameter1:parameter2:parameter3 }}
{{ date | date:'fullDate':'UTC':'en-US' }}
{{ amount | currency:'EUR':'symbol':'1.2-2':'fr' }}

Pure vs Impure Pipes

Pure Pipes (Default)

Called only when input value changes
Better performance
Examples: date, currency, uppercase

Impure Pipes

Called on every change detection cycle
Use sparingly for performance
Examples: async, json

Creating Custom Pipes

You can create custom pipes for specific transformation needs:

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

@Pipe({
  name: 'exponential',
  standalone: true
})
export class ExponentialPipe implements PipeTransform {
  transform(value: number, exponent = 1): number {
    return Math.pow(value, exponent);
  }
}

Usage:

{{ 2 | exponential:3 }}  <!-- 8 -->

Importing Pipes

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

@Component({
  imports: [CommonModule],
  // ...
})

Performance Tips

Use Pure Pipes

Pure pipes are more performant. Only use impure pipes (pure: false) when necessary.

Avoid Heavy Computations

Pipes are called frequently. Keep transformations lightweight or cache results.

Async Pipe Best Practices

Use with *ngIf or @if to avoid multiple subscriptions
Prefer over manual subscribe/unsubscribe
Automatically handles memory cleanup

Pipes Guide

Learn about creating custom pipes

Directives

Common directives reference

Internationalization

i18n and localization

RxJS

Reactive programming with Observables

Core

Common

Forms

Router

HTTP

Platform

Compiler

Animations

Common Pipes

Common Pipes

Date and Time

DatePipe

Number Formatting

CurrencyPipe

Async Data

AsyncPipe

Data Transformation

JsonPipe

Additional Pipes

Usage Patterns

Chaining Pipes

Parameterized Pipes

Pure vs Impure Pipes

Pure Pipes (Default)

Impure Pipes

Creating Custom Pipes

Importing Pipes

Performance Tips

See Also

Pipes Guide

Directives

Internationalization

RxJS

Core

Common

Forms

Router

HTTP

Platform

Compiler

Animations

​Common Pipes

​Date and Time

​DatePipe

​Number Formatting

​CurrencyPipe

​Async Data

​AsyncPipe

​Data Transformation

​JsonPipe

​Additional Pipes

​Usage Patterns

​Chaining Pipes

​Parameterized Pipes

​Pure vs Impure Pipes

Pure Pipes (Default)

Impure Pipes

​Creating Custom Pipes

​Importing Pipes

​Performance Tips

​See Also

Pipes Guide

Directives

Internationalization

RxJS

Common Pipes

Date and Time

DatePipe

Number Formatting

CurrencyPipe

Async Data

AsyncPipe

Data Transformation

JsonPipe

Additional Pipes

Usage Patterns

Chaining Pipes

Parameterized Pipes

Pure vs Impure Pipes

Creating Custom Pipes

Importing Pipes

Performance Tips

See Also