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

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://v17.angular.io/api/common/PercentPipe

Explore