Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/angular-js/angular10-percentpipe/ below:

Angular10 percentPipe - GeeksforGeeks

Last Updated : 23 Jul, 2025

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:

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;
  }

<div>
  <p>1st: {{gfg | percent}}</p>
  <p>2nd: {{geeks | percent:'4.3-5'}}</p>

</div>

Output:

Example 2:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    geeks: number = 100;
  }

<div>
  <p>1st: {{geeks | percent }}</p>
  <p>2nd: {{geeks | percent:'3.4-5' }}</p>
</div>

Output:

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4