Angular number Pipe
April 10, 2024
number pipe in our Angular application. number pipe is DecimalPipe. It formats a value as decimal number.
1. DecimalPipe
DecimalPipe formats a number as decimal number according to digit options and locale rules. The name used by DecimalPipe is number.
DecimalPipe belongs to CommonModule.
Find the syntax.
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
2. number :
DecimalPipe key used with pipe operator.
3. digitInfo : It defines number format.
Syntax for digitInfo is as below.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
minIntegerDigits : Minimum number of integer digits. Default is 1.
minFractionDigits : Minimum number of fraction digits. Default is 0.
maxFractionDigits : Maximum number of fraction digits. Default is 3.
4. locale : Specify the locale to use locale format rules. Default is the value of LOCALE_ID i.e. en-US.
2. Using number Pipe
A. With Default ValuesminIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
1.
TS code:
num = 12.638467846;
{{num | number}}
Fraction digits are truncated to 3 because by default maxFractionDigits is 3.
2.
<p> {{.06 | number}} </p>
3.
<p> {{2.0600 | number}} </p>
4.
<p> {{21.06 | number}} </p>
5.
<p> {{20.0005 | number}} </p>
6.
<p> {{2.00005 | number}} </p>
B. With Digit options
1. Use format '3.2-5' :
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
TS code:
num = 21.738567746;
{{num | number:'3.2-5'}}
In our number, integer part is of 2 digits, so adding 0 as prefix, it has been of 3 digits that is 021. This is because minimum integer digit required is 3. Fraction digits are truncated to 5, this is because maxFractionDigits is 5.
2.
{{.5 | number:'2.2-3'}}
3.
{{1.51 | number:'2.3-4'}}
4.
{{32.51111111 | number:'1.3-4'}}
C. With Digit options and Locale
1.
{{.7 | number:'2.2-3':'en_CA'}}
2.
{{3.41 | number:'2.3-4':'en_US'}}
3.
{{32.53333333 | number:'1.3-4':'en_GB'}}
3. DecimalPipe in Component
To useDecimalPipe in component TS file, create an object of DecimalPipe with default locale and then call its transform() method to format number.
const decimal = new DecimalPipe("en_US");
const n = 1.5232323;
const out1 = decimal.transform(n);
console.log(out1); // 1.523
const out2 = decimal.transform(n, '2.2-4');
console.log(out2); // 01.5232
const out3 = decimal.transform(n, '3.1-2', "en_GB");
console.log(out3); // 001.52
4. Complete Example
decimal.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule, DecimalPipe } from '@angular/common';
@Component({
selector: 'app-decimal',
standalone: true,
imports: [CommonModule],
templateUrl: './decimal.component.html'
})
export class DecimalComponent implements OnInit {
num1: number = 12.638467846;
num2: number = 0.5;
ngOnInit(): void {
this.convertInTitleCase();
}
convertInTitleCase() {
const decimal = new DecimalPipe("en_US");
const n = 3.6262343;
const out1 = decimal.transform(n);
console.log(out1); // 1.523
const out2 = decimal.transform(n, '2.2-4');
console.log(out2); // 01.5232
const out3 = decimal.transform(n, '3.1-2', "en_GB");
console.log(out3); // 001.52
}
}
<h3>Decimal Pipe</h3>
<div>
<p> {{num1 | number}} </p>
<p> {{num1 | number:'3.2-5'}} </p>
<p> {{num2 | number:'3.2-5'}} </p>
<p> {{num1 * num2 | number:'1.3-6'}} </p>
</div>
