Angular Percent Pipe Example


Angular Percent Pipe Example

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

We'll see an example of using Percent Pipe with different formats.

In Angular, Pipe is something that takes in data as input and transforms it to 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_expressionthe number to be formatted as a percentage.

percent: A pipe keyword that is used with pipe operator.

digitsInfo: Decimal format representation in string 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.

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)


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 %







Angular Percent Pipe Example Angular Percent Pipe Example Reviewed by Borad Akash on November 18, 2018 Rating: 5

No comments:

Powered by Blogger.