Angular Decimal Pipe Example

Angular Decimal Pipe Example

Angular Decimal Pipe Example

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

We’ll see an example of using Decimal Pipe with different formats.

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

Decimal Pipe

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

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

DecimalPipe 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 number:’3.1-5′). 
If the pipe accepts multiple parameters, separate the values with colons (such as number:’4.5-5′:’fr’).

Format

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

The basic format of DecimalPipe is as above.
value_expression: the number to be formatted.

number: 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.

DecimalPipe 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.
<br />   number1: number = 2.718281828459045;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number}} <br />
Output:
<br />  2.718<br />


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.
<br />   number1: number = 2.718281828459045;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'3.1-5'}} <br />
Output:
<br />  002.71828<br />



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.
<br />   number1: number = 2.718281828459045;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'4.5-5'}} <br />
Output:
<br />  0,002.71828<br />



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.
<br />   number1: number = 3.14;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'3.1-5'}} <br />
Output:
<br />  003.14<br />



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.
<br />   number1: number = 3.14;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'3.5-5'}} <br />
Output:
<br />  003.14000<br />



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

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.
<br />   number1: number = 2.718281828459045;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'4.5-5':'fr'}} <br />
Output:
<br />  0 002,71828<br />



7) Format ‘1.0-0’ and negative number

In this case, the pipe rounds down to the nearest value.

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

Now declare the number in a component that will be formatted.
<br />   number1: number = -2.5;<br />
Now use a decimal pipe to format the number in template file as below:
<br />  {{number1 | number:'1.0-0'}} <br />
Output:
<br />  -3<br />


Leave a Comment