Formatting Numbers with Pipes in Angular
The DecimalPipe channel can be used to format numbers. In the first parameter of the channel, we pass the minimum number of digits in the integer part. In the second parameter, we specify the minimum number of digits in the fractional part. In the third optional parameter, we set the maximum number of digits in the fractional part.
Even though our pipe is called DecimalPipe, to call it we write: number.
Let's try it in practice. In the component class, we'll set the following number:
export class AppComponent {
num: number = 18;
}
Example
Let's derive our number so that its integer part has two digits. The minimum number of digits in the fractional part will be 1:
<div>{{ num | number:'2.1' }}</div>
Result of code execution:
<div>18.0</div>
Example
Now let's set the fractional part of our number to display two digits:
<div>{{ num | number:'2.2' }}</div>
Result of code execution:
<div>18.00</div>
Example
Let's set a new number:
export class AppComponent {
num: number = 18.67899;
}
And we will display it in the HTML template so that the fractional part displays a maximum of two digits:
<div>{{ num | number:'2.1-2' }}</div>
Result of code execution:
<div>18.68</div>
Example
Now let's format our number so that its integer part has three digits. And the fractional part has five digits:
<div>{{ num | number:'3.5-6' }}</div>
Result of code execution:
<div>018.67899</div>
Example
Let's try to output the minimum number of digits in the fractional part that exceeds the specified number in the number. In our case, we'll output six digits:
<div>{{ num | number:'3.6-8' }}</div>
As a result of running the code, we will see that the DecimalPipe channel has added zero to the fractional part:
<div>018.678990</div>
Practical tasks
Given a number:
num: number = 15;
Format it as follows:
'015.000'
Given a number:
num: number = 12.345;
Format it as follows:
'0012.345'
Given a number:
num: number = 12.345;
Format it as follows:
'12.3'
Given a number:
num: number = 12.345;
Format it as follows:
'012.34500'
Given a number:
num: number = -7.261;
Format it as follows:
'-007.3'
Given a number:
num: number = 100.261923;
Format it as follows:
'100.9226130'
Given a number:
num: number = 100.926613;
Format it as follows:
'0100.93'
