# Angular 10/9/8 Decimal Pipe Example | Number Pipe in Angular

By Hardik Savani | April 8, 2020 | Category : Angular

Today, angular decimal pipe example is our main topic. i would like to share with you angular number pipe example. i explained simply about angular decimal pipe. This tutorial will give you simple example of angular 9 decimal pipe example.

In this tutorial i will provide you full example and how to use angular decimal pipe with date format and locale. you can use it in angular 6, angular 7, angular 8, angular 9 and angular 10 application.

I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.

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:

I will give you simple example how to pass and use digitsInfo parameter.

Syntax: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

`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}`