Angular10 percentPipe

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:

• CommonModule

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 Filename: app.component.html

Output:

 

👁 Image

 

Example 2:

 

Filename: app.component.ts Filename: app.component.html

Output:

 

👁 Image

 

Reference: https://v17.angular.io/api/common/PercentPipe