In this article, we are going to see what is percentPipe in Angular 10 and how to use it.
The percentPipe is used to Transform a number to a percentage string.
Syntax:
{{ value | percent [ : digitsInfo [ : locale ] ] }}
NgModule: Module used by percentPipe is:
Approach:
- Create the angular app to be used
- There is no need for any import for the percentPipe to be used
- In app.component.ts define the variables that take the percentPipe value.
- In app.component.html use the above syntax with ‘|’ symbol to make percentPipe element.
- Serve the angular app using ng serve to see the output
Input value:
- value: it takes a string value.
Parameters:
- digitsInfo: it takes a string value.
- locale: it takes a string value.
Example 1:
Filename: app.component.ts
javascript
import { Component, OnInit } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
geeks: number = 0.4945;
gfg: number = 2.343564;
}
|
Filename: app.component.html
html
< div >
< p >1st: {{gfg | percent}}</ p >
< p >2nd: {{geeks | percent:'4.3-5'}}</ p >
</ div >
|
Output:
Example 2:
Filename: app.component.ts
javascript
import { Component, OnInit } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
geeks: number = 100;
}
|
Filename: app.component.html
html
< div >
< p >1st: {{geeks | percent }}</ p >
< p >2nd: {{geeks | percent:'3.4-5' }}</ p >
</ div >
|
Output:
Reference: https://angular.io/api/common/PercentPipe
Last Updated :
10 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...