Skip to content
Related Articles

Related Articles

Angular 10 DemicalPipe API

Improve Article
Save Article
Like Article
  • Last Updated : 04 Aug, 2021

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!