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
Angular formats dates, numbers, currencies, and percentages with locale-aware pipes. Set the application’s LOCALE_ID for a consistent default, register locale data for locales beyond en-US, and pass explicit options for values—especially dates and currencies—that must render predictably.
How Angular locale formatting works
Angular’s DatePipe, DecimalPipe, CurrencyPipe, and PercentPipe use locale rules. By default, the application locale is en-US; Angular does not automatically change LOCALE_ID to match each visitor’s browser. The locale also affects ICU expressions. See Angular’s locale formatting guide and LOCALE_ID API.
A locale identifies conventions such as grouping separators, decimal marks, date formats, and language-specific forms. For example, en-US and en-CA are distinct locale identifiers, even though both use English. Choose the locale that fits the application’s intended language and region; Angular’s locale ID guide describes the identifier conventions.
Set the application-wide locale
Provide LOCALE_ID in the application’s dependency-injection configuration to make a locale the default for Angular’s i18n pipes and ICU expressions. For example, in a standalone application:
#1 Best Overall
import { ApplicationConfig, LOCALE_ID } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
{ provide: LOCALE_ID, useValue: 'fr' }
]
};Use the locale that the application is configured to serve. This setting is an application default, not a per-user browser negotiation mechanism. If a particular value needs a different locale, pass a locale argument to a pipe that supports one.
Register locale data for non-default locales
Angular includes en-US locale data by default. For other date locales, import the relevant locale data and register it before relying on locale-specific formatting. The official registerLocaleData API documents registration.
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);Register the data for each additional locale the application uses. Setting LOCALE_ID alone does not add locale data to the bundle.
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 →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Format dates, numbers, currencies, and percentages in templates
Use Angular’s built-in pipes in templates. An omitted locale uses the configured application locale; a supplied locale overrides it for that formatting call where the pipe accepts a locale parameter.
Dates
DatePipe accepts a date value, format, timezone, and locale. A basic expression is:
{{ today | date }}For consistent output across servers and users in different time zones, provide the timezone explicitly:
Rank #3
{{ today | date:'medium':'UTC':'fr' }}If you omit the timezone, Angular uses configured default options or the host system timezone. The same instant can therefore display as a different calendar date in different time zones. Consult the DatePipe API for supported arguments and defaults.
Recommended Free Tools
DatePipe is pure: changing a Date object in place does not cause Angular to run the pipe again. Replace the value with a new Date object when the date changes.
Decimal numbers
DecimalPipe applies locale conventions for grouping and decimal separators. Its digit settings follow the pattern {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}. For example:
{{ value | number:'1.0-3':'fr' }}This requests at least one integer digit, zero to three fractional digits, and French locale conventions. The locale argument is optional; without it, the pipe uses LOCALE_ID. Details are in the DecimalPipe API.
Currency amounts
Choose the currency code separately from the locale. Locale determines presentation conventions; it does not decide what currency an amount represents. For example:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11{{ amount | currency:'USD':'symbol':'1.2-2':'en-US' }}Here, USD identifies the currency, symbol requests a currency symbol, 1.2-2 sets digit precision, and en-US overrides the application locale for this output. Currency fraction digits vary by currency, so set digit options when a particular precision is required. See the CurrencyPipe API.
Percentages
Use PercentPipe for percentage presentation, with the locale coming from LOCALE_ID unless an explicit locale is supplied. As with other numeric formatting, the locale controls conventions rather than the meaning or scale of the underlying value.
Format values in TypeScript code
For formatting outside a template, Angular recommends standalone functions from @angular/common rather than injecting a pipe class into a service or another class. Use formatDate, formatNumber, formatCurrency, or formatPercent according to the value being rendered. These functions take the relevant locale as an argument; for dates, also provide a timezone when output must be independent of the host environment. Angular’s pipes guide covers the formatting functions and pipe usage.
Choose settings for predictable output
| Need | Use | Set explicitly when |
|---|---|---|
| Application-wide default conventions | LOCALE_ID |
The app should use a locale other than Angular’s documented en-US default. |
| One value needs a different locale | A pipe’s locale argument or a formatting function’s locale argument | The output differs from the application default. |
| Date and time display | DatePipe or formatDate |
The date format, locale data, or timezone must be controlled. |
| Decimal precision | DecimalPipe or formatNumber |
The minimum or maximum fraction digits matter. |
| Currency display | CurrencyPipe or formatCurrency |
The currency code, display style, locale, or fraction digits must be specified. |
| Values rendered in a template | Built-in pipes | Use explicit arguments for output that must be reproducible. |
| Values formatted in application code | Standalone formatting functions | Pass the needed locale and value-specific options directly. |
For additional localization concerns beyond formatting, Angular’s internationalization guide provides the broader framework documentation.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsQuick 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.
