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>
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
Top comments (1)
yo, can i have assist with a angular pipe?