Angular Decimal Pipe Example | Number Pipe in Angular 9/8/7

April 26, 2020 | Category : Angular

This post is focused on decimal pipe in angular 9/8/7 example. I’m going to show you about number pipe in angular example. you can see angular number pipe decimal. you will learn angular decimal pipe example. Here, Creating a basic example of angular number 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...