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

PercentPipelink

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

Transforms a number to a percentage\nstring, formatted according to locale rules that determine group sizing and\nseparator, decimal-point character, and other locale-specific\nconfigurations.

\n\n \n
\n \n \n \n
\n {{ value_expression | percent [ : 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 \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

Optional. Default is undefined.

\n \n
\n \n locale\n string\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

The following code shows how the pipe transforms numbers\ninto text strings, according to various format specifications,\nwhere the caller's default locale is en-US.

\n\n@Component({\n selector: 'percent-pipe',\n template: `<div>\n <!--output '26%'-->\n <p>A: {{a | percent}}</p>\n\n <!--output '0,134.950%'-->\n <p>B: {{b | percent:'4.3-5'}}</p>\n\n <!--output '0 134,950 %'-->\n <p>B: {{b | percent:'4.3-5':'fr'}}</p>\n </div>`\n})\nexport class PercentPipeComponent {\n a: number = 0.259;\n b: number = 1.3495;\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }