DecimalPipe

pipe

npm Package	@angular/common
Module	import { DecimalPipe } from '@angular/common';
Source	common/src/pipes/number_pipe.ts
NgModule	CommonModule

How To Use

number_expression | number[:digitInfo[:locale]]

Formats a number as text. Group sizing and separator and other locale-specific configurations are based on the active locale.

where expression is a number:

• digitInfo is a string which has a following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
• minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
• minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
• maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
• locale is a string defining the locale to use (uses the current LOCALE_ID by default)

For more information on the acceptable range for each of these numbers and other details see your native internationalization library.

Example

@Component({
  selector: 'number-pipe',
  template: `<div>
    <!--output '2.718'-->
    <p>e (no formatting): {{e | number}}</p>
    
    <!--output '002.71828'-->
    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>

    <!--output '0,002.71828'-->
    <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
    
    <!--output '0 002,71828'-->
    <p>e (french): {{e | number:'4.5-5':'fr'}}</p>

    <!--output '3.14'-->
    <p>pi (no formatting): {{pi | number}}</p>
    
    <!--output '003.14'-->
    <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>

    <!--output '003.14000'-->
    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
  </div>`
})
export class NumberPipeComponent {
  pi: number = 3.14;
  e: number = 2.718281828459045;
}