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.
Angular number Pipe

5. Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE







©2024 concretepage.com | Privacy Policy | Contact Us