Open In App

Angular 10 DemicalPipe API

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 04 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads