Angular10 percentPipe

Last Updated : 10 Apr, 2023

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

Angular10 percentPipe

taran910

Improve

Article Tags :

Angular10 percentPipe

Similar Reads

Thank You!

What kind of Experience do you want to share?