Hello Devs, 

In this tutorial, we will learn Angular Decimal Pipe Example | Number Pipe in Angular 9/8/7

In this section, you can see angular number pipe decimal. you will learn angular decimal pipe example

Follow this step by step guide below. 

Syntax:

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}



No Parameters Example:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>{{ mynumber | number }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  mynumber: number = 10.123456789

}


Output:

10.123


digitsInfo Parametger Example 1:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>{{ mynumber | number: '1.0-4' }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  mynumber: number = 10.123456789

}


Output:

10.1235


digitsInfo Parametger Example 2:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>{{ mynumber | number: '3.1-3' }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  mynumber: number = 10.123456789

}


Output:

010.123


digitsInfo Parametger Example 3:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>{{ mynumber | number: '3.2-2' }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  mynumber: number = 150000.123456789

}


Output:

150,000.12

locale parameter example:

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>{{ mynumber | number: '3.1-3' :'fr' }}</p>

  </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  mynumber: number = 10.123456789

}


May this example help you.