How can i output my number with four decimals in percentage?

Question

I have the number 10. I need to display the numbers with four decimals in percentage. So at the end i should have

10,0000 %

when i try

{{ overallCostDeviation | percent:'4.1' }}

i get 1,000.0%

how can i fix this?

Answer 1

To always show 4 decimal places, what you are looking for is the following:

{{ overallCostDeviation | percent:'1.4-4' }}

Per documentation , the format of the digitsInfo string is the following:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

To have a fixed number of decimal places, you need to set the minFractionDigits and maxFractionDigits to the same number (4 in your case).

Also note that the percent pipe expects the input value (ie overallCostDeviation ) to be in decimal form: 10% should be given as 0.1.

Lastly, the symbol used to represent the decimal is tied to the locale . The default locale is en-US , which uses . for the decimal. If you want to use , for the decimal, then you need to set a locale that uses , for a decimal. See this SO post to learn how to register a locale.

StackBlitz Example:

• Register locale in app.module.ts
• Example usage of percent pipe in app.component.html

Answer 2

The percentage pipe works as such that it takes a decimal number (usually). So if you want 10 percent to be shown, your value should be 0.10 for the percentage pipe to consider it 10 percent. Well, if you want to go with the percentage pipe, you need to divide your value with 100.

Could be done like so, with the actual pipe argument provided by Sam:

{{ overallCostDeviation / 100 | percent:'1.4-4'}}

Or if you want to go with the number pipe (well, the , will become . in that case, unless using locale...):

{{ overallCostDeviation | number:'1.4'  }}%