Syntax

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

This pipe belongs to the Common Module.

The Input Value

The input accepted by this pipe can be of type string or number.

The Parameter

digitsInfo
This parameter expects a string.
It governs the digit and decimal formatting rules.
This is optional, with a default value of undefined.

locale
This is a string parameter.
It determines the locale-specific formatting to apply.
This is optional, with a default value of undefined.

The digitsInfo adheres to this structure:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits
The minimum count of digits expected before the decimal point.
Default is 1.

minFractionDigits
The minimum count of digits permitted after the decimal point.
Default is 0.

maxFractionDigits
The maximum count of digits permitted after the decimal point.
Default is 3.

Let us explore this with a practical example. Open component.ts:
Built-In Angular Pipes - DecimalPipe - Part 3 — figure 1

Create a variable named pi and set its value to 3.14159.

  pi = 3.14159;
Enter fullscreen mode Exit fullscreen mode

In the associated template, insert the following snippet:

<h2>Decimal Pipe</h2>

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

The output generated will be as follows:
Built-In Angular Pipes - DecimalPipe - Part 3 — figure 2

From this output, it is evident that displaying pi without any pipe shows the complete number. Applying the decimal pipe, however, restricts the decimal places to 3 and also performs rounding.

Now, let us examine the digitsInfo parameter more closely.

Insert the subsequent code block:

<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>
Enter fullscreen mode Exit fullscreen mode

The output for this code will be:

Built-In Angular Pipes - DecimalPipe - Part 3 — figure 3

This wraps up the current exploration.
The rest of the pipes will appear in following posts.
Stay tuned...
Thank you for reading; if you found this useful, please like, share, and leave a comment.

Cheers!!!
Happy Coding