Built-In Angular Pipes - DecimalPipe - Part 3
Tags: angular, beginners, tutorial, pipe
Published: 2022-01-05 17:15:40

**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](https://dev.to/this-is-angular/built-in-angular-pipes-part-1-23ec).

---

`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 -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6h986m6wqhn9dkew7sc.PNG)

And add a variable `pi` and assign the value <u>3.14159</u>

```
  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 -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7997prub6pd8jbze3d2.PNG)

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 - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j44wxh4qjcp273mtbelh.PNG)

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_