Built-In Angular Pipes - DecimalPipe - Part 3

Today we will continue with the remaining built in Angular pipes. If you are not aware of pipe I would recommend you to go through the post.

DecimalPipe

The DecimalPipe is used to format a value/ number as per the required decimal digits and locale information.

The name of the pipe is number

Syntax

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

Present in the Common Module

The Input value

Input Value which the pipe accepts must be either in string or number

The Parameter

digitsInfo
It is of type string.
It is used to set the digit and decimal representation.
It is Optional.
Default value is undefined.

locale
It is of type string.
It specifies what locale format that will be implemented.
It is Optional.
Default value is undefined.

The digitsInfo follows the following format -
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits
Minimum number of integer digits before the decimal point.
Default value is 1.

minFractionDigits
Minimum number of digits allowed after the decimal point.
Default is 0.

maxFractionDigits
Maximum number of digits allowed after the decimal point.
Default is 3.

Now, lets see in practice. Lets open the component.ts file -

And add a variable pi and assign the value 3.14159

pi = 3.14159;

and in the corresponding template file lets add the below code -

<h2>Decimal Pipe</h2>

<h4>Without the pipe</h4>
<p>{{ pi }}</p>
<hr />
<h4>Default Decimal Pipe</h4>
<p>{{ pi | number }}</p>
<hr />

We will see the below output -

So here in the above output we can see when we display the value of pi without any pipe it shows the entire value. But when we use the decimal pipe the number of digits after decimal becomes 3 and does the rounding off too.

Now lets see the digitsInfo parameter in detail-

Lets paste in the below code -

<h4>digitsInfo Example</h4>

<p>
  Here number of digits before decimal is 1. <br>
  Minimum number of digits after decimal is 1 <br>
  Maximum numberof digits after decimal is 2 <br>
  <i>Output- </i>
  <b>{{ pi | number: "1.1-2" }}</b>
</p>

<p>
  Here number of digits before decimal is 3. 
Since the value has only one digit so the remaining 
digits are covered by 0.<br>
  Minimum number of digits after decimal is 2. <br>
  Maximum numberof digits after decimal is 4. 
Number of digits shown after decimal is 4. <br>
  <i>Output- </i>
  <b>{{ pi | number: "3.2-4" }}</b>
</p>

<p>
  No digits after the Decimal Point. <br>
  <i>Output- </i>
  <b>{{ pi | number: "1.0-0" }}</b>
</p>