Angular 10 DecimalPipe API

The DecimalPipe is an Angular built-in pipe that transforms a numeric value into a string representation formatted according to the specified format. It is a very useful tool for formatting currencies, percentages, and other numeric values.

Syntax

{{ value_expression | decimal [ : digitsInfo [ : locale ] ] }}

• value_expression: The value to be formatted.
• digitsInfo: The format for the digits. It is an optional argument that consists of two parts separated by a colon. The first part is the minimum number of digits before the decimal point, and the second part is the minimum number of digits after the decimal point. For example, "1.2-3" means at least 1 digit before the decimal point and between 2 to 3 digits after the decimal point.
• locale: The locale to use. It is an optional argument that defaults to the current locale.

Examples

Basic Usage

{{ 12345678.901 | decimal }}

Output: 12,345,678.901

Using digitsInfo

{{ 123.45678 | decimal:'2.2-2' }}

Output: 123.46

Using locale

{{ 12345678.901 | decimal:'2.2-2':'de' }}

Output: 12.345.678,90

Conclusion

The DecimalPipe is a very useful tool for formatting numeric values in Angular. You can customize the output format by using the digitsInfo argument and change the locale through the third argument.