{ "id": "api/common/DecimalPipe", "title": "DecimalPipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

DecimalPipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n value\n string | number\n

The value to be formatted.

\n\n
\n \n \n

Parameterslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n digitsInfo\n string\n

Sets digit and decimal representation.\nSee more.

\n

Optional. Default is undefined.

\n\n
\n \n locale\n string\n

Specifies what locale format rules to use.\nSee more.

\n

Optional. Default is undefined.

\n\n
\n \n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n\n\n \n
\n

Usage noteslink

\n

digitsInfolink

\n

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

\n\n{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}\n\n
    \n
  • \n

    minIntegerDigits:\nThe minimum number of integer digits before the decimal point.\nDefault is 1.

    \n
    • \n
  • \n

    minFractionDigits:\nThe minimum number of digits after the decimal point.\nDefault is 0.

    \n
    • \n
  • \n

    maxFractionDigits:\nThe maximum number of digits after the decimal point.\nDefault is 3.

    \n
    • \n
\n

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

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

localelink

\n

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

\n

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

\n

See Setting your app locale.

\n

Examplelink

\n

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

\n\n@Component({\n selector: 'number-pipe',\n template: `<div>\n\n <p>\n No specified formatting:\n {{pi | number}}\n <!--output: '3.142'-->\n </p>\n\n <p>\n With digitsInfo parameter specified:\n {{pi | number:'4.1-5'}}\n <!--output: '0,003.14159'-->\n </p>\n\n <p>\n With digitsInfo and\n locale parameters specified:\n {{pi | number:'4.1-5':'fr'}}\n <!--output: '0 003,14159'-->\n </p>\n\n </div>`\n})\nexport class NumberPipeComponent {\n pi: number = 3.14159265359;\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }