Angular Percent Pipe

Angular Percent Pipe Example

by

In Angular, We have a few built-in pipes. In this blog post, we’ll learn about Percent Pipe in Angular.

Angular PercentPipe formats the number as a percentage

We’ll see an example of using Percent Pipe with different formats and how to use percent pipe with locale as well and round the percentage using Angular PercentPipe and digitsInfo.


In Angular, Pipe is something that takes in data as input and transforms it into the desired output.

Percent Pipe

It transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

PercentPipe is an API provided by angular. It is part of angular CommonModule.  

PercentPipe is Parameterized Pipe. Parameterized Pipe accepts any number of optional parameter to get the desired output from the given input.  

To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as percent:’4.3-5′).   

If the pipe accepts multiple parameters, separate the values with colons (such as percent:’4.5-5′:’fr’).

Format

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

The basic format of PercentPipe is as above.  

  • value_expression: the number to be formatted as a percentage.  
  • percent: A pipe keyword that is used with pipe operator.  
  • digitsInfo: Decimal format representation in string format. This is basically used to round the percentage.
{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.

locale: A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.

PercentPipe Example

1) No Formatting

It will use the default values for digitsInfo.  

minIntegerDigits: 1
minFractionDigits: 0
maxFractionDigits: 3

Now declare the number in a component that will be formatted. 

number1: number = 0.25;

  Now use a percent pipe to format the number in template file as below: 

{{number1 | percent }}

Output: 

  25%

2) Format: ‘3.1-5’

It will use the following values for digitsInfo.  

minIntegerDigits: 3
minFractionDigits: 1
maxFractionDigits: 5

Now declare the number in a component that will be formatted. 

number1: number = 0.25;

  Now use a percent pipe to format the number in template file as below: 

{{number1 | percent:'3.1-5'}}

Output: 

  025.0%

3) Format: ‘4.5-5’

It will use the following values for digitsInfo.  

minIntegerDigits: 4
minFractionDigits: 5
maxFractionDigits: 5

Now declare the number in a component that will be formatted. 

number1: number = 0.25;

  Now use a percent pipe to format the number in template file as below: 

{{number1 | percent:'4.5-5'}}

Output: 

  0,025.00000%

4) Format: ‘3.1-5’

It will use the following values for digitsInfo.  
minIntegerDigits: 3
minFractionDigits: 1
maxFractionDigits: 5

Now declare the number in a component that will be formatted. 

number1: number = 3.5;

  Now use a percent pipe to format the number in template file as below: 

{{number1 | percent:'3.1-5'}}

Output: 

  350.0%

5) Format: ‘3.5-5’

It will use the following values for digitsInfo.  

minIntegerDigits: 3
minFractionDigits: 5
maxFractionDigits: 5

Now declare the number in a component that will be formatted. 

number1: number = 3.5;

  Now use a decimal pipe to format the number in template file as below: 

{{number1 | percent:'3.5-5'}}

Output: 

  350.00000%

6) Format:’4.3-5′ and locale:’fr’ (french)

In this example, we’ll see how to use Angular PercentPipe with locale.

It will use the following values for digitsInfo.  
minIntegerDigits: 4
minFractionDigits: 3
maxFractionDigits: 5

Now declare the number in a component that will be formatted. 

number1: number = 3.5;

  Now use a decimal pipe to format the number in template file as below: 

{{number1 | number:'4.3-5':'fr'}}

Output: 

  0 350,000 %

Also, read:  

If you like this post, please share it with your friends.  

Thanks.