How to format numbers with Angular decimal pipe
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Formatting decimal numbers consistently is crucial for displaying financial data, measurements, and statistics in Angular applications. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve formatted countless numeric values in enterprise dashboards. The most efficient solution is to use Angular’s built-in decimal pipe with custom digit format specifications. This pipe handles locale-specific formatting, decimal precision, and digit grouping automatically.
Use the number or decimal pipe in Angular templates to format decimal numbers.
// component.ts
export class AppComponent {
price = 1234.5678
percentage = 0.8542
quantity = 1500
}
<!-- template.html -->
<p>{{ price | number:'1.2-2' }}</p>
<p>{{ percentage | number:'1.2-4' }}</p>
<p>{{ quantity | number:'1.0-0' }}</p>
The decimal pipe accepts a digit format string following the pattern minIntegerDigits.minFractionDigits-maxFractionDigits. For example, '1.2-2' means at least 1 integer digit, minimum 2 decimal places, and maximum 2 decimal places. The pipe automatically adds thousand separators based on the locale. If you don’t specify a format, it defaults to locale-specific formatting with 3 decimal places maximum.
Best Practice Note
This is the same numeric formatting we use in CoreUI Angular components for tables and charts. For better performance in large tables, consider formatting numbers in the component rather than using pipes repeatedly, as pipes execute on every change detection cycle. Always specify explicit formats for financial data to ensure consistent decimal precision.
