Skip to content
Angular ng pipes 4 min read

Built-in Pipes

Pipes transform a value directly in the template, letting you format dates, money, numbers, and text without cluttering your component class with display logic. Angular ships a set of common pipes out of the box, covering the formatting tasks almost every app needs. In modern standalone components you import each pipe individually from @angular/common rather than pulling in the whole CommonModule. This page walks through the most useful built-in pipes — DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, and the case-conversion pipes — along with their formatting options.

Importing pipes in a standalone component

Each built-in pipe is exported as a standalone directive, so you add only the ones you use to the component’s imports array. This keeps bundles lean because unused pipes are never pulled in.

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

@Component({
  selector: 'app-invoice',
  standalone: true,
  imports: [DatePipe, CurrencyPipe, DecimalPipe, UpperCasePipe],
  template: `
    <p>Issued: {{ issuedOn | date: 'mediumDate' }}</p>
    <p>Total: {{ amount | currency: 'USD' }}</p>
  `,
})
export class InvoiceComponent {
  issuedOn = new Date(2026, 5, 14);
  amount = 1499.5;
}

The pipe operator | passes the left-hand value into the pipe; everything after a colon is a parameter. You can chain multiple pipes, and Angular evaluates them left to right.

Formatting dates with DatePipe

DatePipe formats a Date, a millisecond timestamp, or an ISO date string. It accepts a format string — either a named alias or a custom pattern — plus optional timezone and locale arguments.

<p>{{ now | date }}</p>
<p>{{ now | date: 'short' }}</p>
<p>{{ now | date: 'fullDate' }}</p>
<p>{{ now | date: 'yyyy-MM-dd HH:mm' }}</p>
<p>{{ now | date: 'shortTime' : 'UTC' }}</p>

Output:

Jun 14, 2026
6/14/26, 9:30 AM
Sunday, June 14, 2026
2026-06-14 09:30
2:30 PM

The most common named formats are summarized below.

FormatExample output
short6/14/26, 9:30 AM
mediumJun 14, 2026, 9:30:00 AM
mediumDateJun 14, 2026
fullDateSunday, June 14, 2026
shortTime9:30 AM
'yyyy-MM-dd'2026-06-14

Formatting money with CurrencyPipe

CurrencyPipe formats a number as a localized currency string. Its arguments are the currency code, the display style for the symbol, and a digits pattern controlling decimal places.

<p>{{ price | currency }}</p>
<p>{{ price | currency: 'EUR' }}</p>
<p>{{ price | currency: 'EUR' : 'code' }}</p>
<p>{{ price | currency: 'JPY' : 'symbol' : '1.0-0' }}</p>

Output:

$1,499.50
€1,499.50
EUR 1,499.50
¥1,500

The digits parameter '1.0-0' reads as minIntegerDigits.minFractionDigits-maxFractionDigits, which here forces a whole-number display suited to currencies without minor units.

Numbers and percentages

DecimalPipe formats plain numbers with grouping separators and a controllable number of decimals, while PercentPipe multiplies the value by 100 and appends a percent sign.

<p>{{ pi | number: '1.2-2' }}</p>
<p>{{ count | number }}</p>
<p>{{ ratio | percent }}</p>
<p>{{ ratio | percent: '1.1-1' }}</p>
pi = 3.14159;
count = 1234567;
ratio = 0.4267;

Output:

3.14
1,234,567
43%
42.7%

Tip: The digits string is shared by DecimalPipe, CurrencyPipe, and PercentPipe. Memorizing the minInt.minFrac-maxFrac shape once means you can control precision across all three pipes the same way.

Case-conversion and JSON pipes

For text, UpperCasePipe, LowerCasePipe, and TitleCasePipe transform casing. TitleCasePipe capitalizes the first letter of each word. The JsonPipe is invaluable during development for inspecting an object’s shape directly in the template.

<p>{{ name | uppercase }}</p>
<p>{{ name | lowercase }}</p>
<p>{{ name | titlecase }}</p>
<pre>{{ user | json }}</pre>
name = 'ada lovelace';
user = { id: 7, role: 'admin', active: true };

Output:

ADA LOVELACE
ada lovelace
Ada Lovelace
{
  "id": 7,
  "role": "admin",
  "active": true
}

Warning: Locale-aware pipes like DatePipe, CurrencyPipe, and DecimalPipe format using the en-US locale by default. To format for other locales, register locale data with registerLocaleData() and provide LOCALE_ID in your bootstrapApplication providers — otherwise non-US dates and number separators will be wrong.

Setting a default locale

To localize formatting app-wide, register the locale data and provide LOCALE_ID at bootstrap.

import { bootstrapApplication } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import { LOCALE_ID } from '@angular/core';
import localeFr from '@angular/common/locales/fr';
import { AppComponent } from './app/app.component';

registerLocaleData(localeFr);

bootstrapApplication(AppComponent, {
  providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }],
});

With this in place, {{ price | currency: 'EUR' }} renders as 1 499,50 €, using the French grouping and decimal conventions automatically.

Best practices

  • Import individual pipes (DatePipe, CurrencyPipe) into a component’s imports array rather than the whole CommonModule to keep bundles small.
  • Prefer named date formats like mediumDate for consistency, and reserve custom patterns for cases the aliases do not cover.
  • Always pass an explicit currency code to CurrencyPipe; relying on the default code makes intent unclear and breaks across locales.
  • Use the minInt.minFrac-maxFrac digits string to control precision consistently across decimal, currency, and percent pipes.
  • Register locale data and provide LOCALE_ID early when your app serves non-US users, so all locale-aware pipes format correctly.
  • Treat JsonPipe as a debugging aid only — remove it from production templates, as serializing large objects on every change detection cycle is wasteful.
Last updated June 14, 2026
Was this helpful?