# Angular number Pipe

By Arvind Rai, April 10, 2024
On this page we will learn to use 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 ] ] }}
1. value_expression : A number or an expression that will give output as number.
2. number : DecimalPipe key used with pipe operator.
3. digitInfo : It defines number format.
Syntax for digitInfo is as below.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Find the description.
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 Values
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
1.
TS code:
num = 12.638467846;
HTML code:
{{num | number}}
Output: 12.638
Fraction digits are truncated to 3 because by default maxFractionDigits is 3.
2.
<p> {{.06 | number}} </p>
Output: 0.06
3.
<p> {{2.0600 | number}} </p>
Output: 2.06
4.
<p> {{21.06 | number}} </p>
Output: 21.06
5.
<p> {{20.0005 | number}} </p>
Output: 20.001
6.
<p> {{2.00005 | number}} </p>
Output: 2

B. With Digit options
1. Use format '3.2-5' :
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
TS code:
num = 21.738567746;
HTML code:
{{num | number:'3.2-5'}}
Output: 021.73857
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'}}
Output: 00.50

3.
{{1.51 | number:'2.3-4'}}
Output: 01.510

4.
{{32.51111111 | number:'1.3-4'}}
Output: 32.5111

C. With Digit options and Locale
1.
{{.7 | number:'2.2-3':'en_CA'}}
Output: 00.70
2.
{{3.41 | number:'2.3-4':'en_US'}}
Output: 03.410
3.
{{32.53333333 | number:'1.3-4':'en_GB'}}
Output: 32.5333

## 3. DecimalPipe in Component

To use DecimalPipe 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
}
}
decimal.component.html
<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>
Find the print-screen of the output.

POSTED BY
ARVIND RAI