The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Use Angular’s built-in date, currency, number, and percent pipes to format values directly in a template. Their output follows locale rules, so choose the right pipe and configure locale, date timezone, and numeric precision where the displayed result needs to be predictable.
Choose a pipe for the value you are displaying
| Pipe | Use it for | What it controls |
|---|---|---|
DatePipe (date) |
Dates and times | Date format, timezone, and locale |
CurrencyPipe (currency) |
Monetary amounts | Currency code, display, digits, and locale |
DecimalPipe (number) |
General numeric quantities | Grouping and fractional digits |
PercentPipe (percent) |
Ratios displayed as percentages | Fractional digits and locale |
These are among the transformation pipes Angular provides in @angular/common. See Angular’s Pipes guide and locale formatting guide.
As an Amazon Associate I earn from qualifying purchases.
Use pipes in a template
Import the pipe you need from @angular/common into the component that uses it. Then place the pipe after the value in a template expression:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
{{ amount | currency }}
{{ purchasedOn | date }}Pass options after the pipe name using colons. Multiple arguments use additional colons; for example, a date expression can provide a format and then a timezone. Use parentheses when an expression is complex enough that it is unclear which value the pipe receives.
#1 Best Overall
Set locale deliberately
Locale changes visible formatting, including digit grouping and decimal separators. These built-in formatting pipes use Angular’s LOCALE_ID by default; the token defaults to en-US. Some pipes also accept an explicit locale argument, which overrides the default for that formatting operation. The LOCALE_ID API documents the token.
Angular includes only en-US locale data by default. If an application needs another locale’s conventions, import that locale data as described in the locale formatting guide. Setting a locale identifier without the required data does not by itself supply that locale’s formatting data.
Format dates with DatePipe
DatePipe accepts a date string, a Date object, or a number representing milliseconds since the UTC epoch. Its template argument order is format, timezone, then locale:
{{ value_expression | date:format:timezone:locale }}Choose a format and timezone
The format can be a predefined option or a custom format string. If omitted, Angular checks DATE_PIPE_DEFAULT_OPTIONS; if that token is not configured, the format is mediumDate. The timezone follows a similar default: Angular checks the default-options token, then uses the end user’s local system timezone if no default is configured and no timezone is passed.
Rank #3
If the display must be consistent across users, specify or configure the intended timezone rather than relying on each user’s system setting. The DatePipe API documents accepted values, defaults, and arguments.
Account for pure-pipe change detection
DatePipe is pure: Angular reruns it when a primitive input changes or an object reference changes. Mutating an existing Date object in place does not trigger a new formatted result. Create and assign a new Date object when the represented date changes.
Control numeric precision
DecimalPipe accepts digitsInfo in this form:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}Its defaults are one minimum integer digit, zero minimum fractional digits, and three maximum fractional digits. Locale controls grouping and separator characters. When the requested precision limits the output, the value is rounded: Angular’s API example formats 3.6 with zero fractional digits as 4. See the DecimalPipe API.
Recommended Free Tools
Currency and percentage output
CurrencyPipe accepts a currency code, display option, digits, and locale. PercentPipe accepts optional digits and locale arguments. Because locale and currency choices affect what readers see, specify the currency code and locale when the intended display should not depend on application defaults. Refer to Angular’s CurrencyPipe API and PercentPipe API for the argument details.
Format values outside templates
For formatting in services or other non-template code, use Angular’s standalone formatDate, formatCurrency, formatNumber, and formatPercent functions. Angular recommends these functions instead of injecting pipe classes into a service. The Pipes guide covers both template pipes and the formatting functions.
When to write a custom pipe
Use a custom pipe when a transformation belongs in template expressions and should be reusable. Angular’s documented approach is to add @Pipe and implement PipeTransform; additional pipe parameters are passed as arguments to transform.
Keep custom pipes pure unless the transformation truly requires checking for changes beyond changed values or references. Angular cautions: “Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.” The official Pipes guide explains the distinction.
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.
