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

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

April 26, 2020 | Category : Angular