Angular 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 and angular 9 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

}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: