Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Angular’s built-in date, currency, number, and percent pipes to format values for display in templates. Choose the pipe by data type, then set locale, timezone, or digit precision when the default output is not right for your interface. In non-template code, use Angular’s corresponding formatting functions.
Choose a pipe for the value you are displaying
Angular pipes transform a value in a template expression. The pipe operator is |; parameters follow the pipe name after colons. Angular’s locale-aware formatting pipes are part of @angular/common.
| Pipe | Use it for | Example |
|---|---|---|
DatePipe (date) |
Dates and times | {{ purchasedOn | date }} |
CurrencyPipe (currency) |
Amounts displayed as currency | {{ amount | currency }} |
DecimalPipe (number) |
General numeric quantities | {{ quantity | number }} |
PercentPipe (percent) |
Values displayed as percentages | {{ completion | percent }} |
See Angular’s Pipes guide for how to use built-in and custom pipes.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Import the pipe into the component
For a standalone component, import each pipe used by its template from @angular/common and add it to the component’s imports. For example:
#1 Best Overall
import { Component } from '@angular/core';
import { CurrencyPipe, DatePipe } from '@angular/common';
@Component({
selector: 'app-order-summary',
standalone: true,
imports: [CurrencyPipe, DatePipe],
template: `
Purchased: {{ purchasedOn | date }}
Total: {{ amount | currency }}
`
})
export class OrderSummaryComponent {
purchasedOn = new Date();
amount = 125.5;
}If you use an NgModule-based component, make the pipes available through that module’s imports instead. In an expression with ambiguous precedence, use parentheses to make clear which value is being piped.
Set locale deliberately
The locale controls conventions such as digit grouping, decimal separators, and date presentation. These pipes use the application’s LOCALE_ID by default; the token defaults to en-US. Angular includes only en-US locale data by default. To format using another locale, import its locale data and configure the application accordingly. The Angular locale formatting guide explains the setup, and the LOCALE_ID API documents the token.
CurrencyPipe also accepts an explicit locale parameter, which can override the app-wide default for that expression. Currency code and locale are separate choices: specify the currency code you intend to show rather than assuming the application locale alone identifies it. The CurrencyPipe API documents its parameters.
Format dates with a format, timezone, and locale
DatePipe accepts a string, a Date object, or a number representing milliseconds since the UTC epoch. Its parameter order is format, timezone, then locale:
Rank #3
{{ value_expression | date:format:timezone:locale }}Angular supports predefined date formats as well as custom format strings. If you omit the format, Angular checks DATE_PIPE_DEFAULT_OPTIONS; if no default is configured, the format is mediumDate. If you omit the timezone, it checks that same options token and otherwise uses the end user’s local system timezone. With no locale argument, it uses LOCALE_ID. Consult the DatePipe API for accepted formats, parameters, and default behavior.
When a date must appear in a particular timezone rather than the viewer’s local timezone, pass that timezone explicitly or configure the default options. This is especially important when the displayed date must be consistent for users in different timezones.
Control numeric precision
Decimal quantities
DecimalPipe accepts digitsInfo in the form {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. For example, {{ quantity | number:'1.2-2' }} requests at least one integer digit and exactly two fractional digits. The documented defaults are one minimum integer digit, zero minimum fraction digits, and three maximum fraction digits. Output follows locale-specific grouping and separator rules. If the requested precision limits the fraction, the value is rounded: Angular’s API example formats 3.6 with zero fractional digits as 4. See the DecimalPipe API.
Currency and percentages
CurrencyPipe accepts a currency code, display option, digit settings, and locale. PercentPipe accepts optional digit settings and locale. Use these parameters when the intended display needs a specific currency, locale, or precision; check the APIs for the full parameter order and supported options: CurrencyPipe and PercentPipe.
Know when a pure pipe updates
Built-in pipes such as DatePipe are pure: Angular reruns them when a primitive input changes or an object reference changes. Mutating a Date object in place does not itself trigger a new formatted value. When the represented date changes, assign a new Date instance. The same reference-change principle applies to objects and arrays passed through pure pipes; replace the reference when the new value should be formatted.
Angular cautions: “Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.” An impure pipe can run more frequently during change detection, so use one only when its change-detection behavior is genuinely required. The Pipes guide covers pure and impure pipes.
Format values outside templates
For formatting in a service or other non-template code, use Angular’s standalone functions rather than injecting a pipe class: formatDate, formatCurrency, formatNumber, and formatPercent. They correspond to the built-in formatting pipes. Angular documents this approach in its Pipes guide.
Create a custom pipe only for reusable template transformations
When a transformation belongs in a template and is not covered by a built-in pipe, define a custom pipe with @Pipe and implement PipeTransform. Additional pipe parameters become arguments to its transform method. Keep formatting rules that must be shared with services or other non-template code in reusable functions instead of making a template-only pipe the sole implementation.
Angular’s Formatting data with pipes tutorial provides a guided introduction.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
