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:
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 >
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 >
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
Share your thoughts in the comments
Please Login to comment...