W3cubDocs

/Angular 12

DecimalPipe

pipe

Formats a value according to digit options and locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.

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

Exported from

Input value

value string | number

The value to be formatted.

Parameters

digitsInfo string

Sets digit and decimal representation. See more.

Optional. Default is undefined.

locale string

Specifies what locale format rules to use. See more.

Optional. Default is undefined.

See also

Usage notes

digitsInfo

The value's decimal representation is specified by the digitsInfo parameter, written in the following format:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  • minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

  • minFractionDigits: The minimum number of digits after the decimal point. Default is 0.

  • maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

If the formatted value is truncated it will be rounded using the "to-nearest" method:

{{3.6 | number: '1.0-0'}}
<!--will output '4'-->

{{-3.6 | number:'1.0-0'}}
<!--will output '-4'-->

locale

locale will format a value according to locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.

When not supplied, uses the value of LOCALE_ID, which is en-US by default.

See Setting your app locale.

Example

The following code shows how the pipe transforms values according to various format specifications, where the caller's default locale is en-US.

@Component({
  selector: 'number-pipe',
  template: `<div>

    <p>
      No specified formatting:
      {{pi | number}}
      <!--output: '3.142'-->
    </p>

    <p>
      With digitsInfo parameter specified:
      {{pi | number:'4.1-5'}}
      <!--output: '0,003.14159'-->
    </p>

    <p>
      With digitsInfo and
      locale parameters specified:
      {{pi | number:'4.1-5':'fr'}}
      <!--output: '0 003,14159'-->
    </p>

  </div>`
})
export class NumberPipeComponent {
  pi: number = 3.14159265359;
}

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/common/DecimalPipe