**T**oday 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>
```

In the output for the above code you would see -

That's all for now.

Coming up the remaining pipes in the next post.

So stay tuned...

Hope you enjoyed the post if yes do like share and comment!!!

**Cheers**!!!

*Happy Coding*

## Discussion (0)