Angular 10 DemicalPipe API

In this article, we are going to see what is DemicalPipe in Angular 10 and how to use it. The DemicalPipe is used to format a value according to digit options and locale rules.

Syntax:

{{ value | number}}

NgModule: Module used by DecimalPipe is:

• CommonModule

Approach: 

• Create an Angular app to be used.
• There is no need for any import for the DecimalPipe to be used.
• In app.component.ts define the variable that takes decimal value.
• In app.component.html use the above syntax to make the date element.
• Serve the angular app using ng serve to see the output.

Parameters:

• Value: It takes a string value that is converted to a decimal according to the conditions using the decimal pipe.

Example 1:

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    pi: number = 2.33;
}

app.component.html

<p>
    Number:
    {{pi | number}}
</p>

<p>
    <!-- In this '4.1-5' means 4 digits before .
         and 1-5 digits after . depending
         upon given digit -->
    Number with 4 digits:
    {{pi | number:'4.1-5'}}
</p>

Output:

Example 2:

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    num: number = 20*4;
}

app.component.html

<p>
    Number:
    {{num | number}}
</p>

<p>
    <!-- In this '4.2' means 3 digits before .
         and 2 digits after . which is 80-->
    Number with 3 digits:
    {{num | number:'3.2'}}
</p>

Output:

Reference: https://angular.io/api/common/DecimalPipe