Angular percent Pipe

By Arvind Rai, April 08, 2024

On this page we will learn to use percent pipe in our Angular application. Percent Pipe formats a number as percentage. It uses percent keyword. We can format a number with percent pipe with default format as well as custom format.

1. PercentPipe

Angular PercentPipe is an angular Pipe API that formats a number as a percentage according to digit options and locale rules. It belongs to CommonModule.
Find its syntax.

{{ number_expression | percent [ : digitsInfo [ : locale ] ] }}

Find the description.
a. number_expression : A number or an expression that will give output as number to be formatted.
b. percent : A pipe keyword that is used with pipe operator and it converts number into percent.
c. digitInfo : It defines a percentage format.cIt is used with following syntax.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits : Minimum number of integer digits before decimal point. Default is 1.
minFractionDigits : Minimum number of fraction digits after decimal point. Default is 0.
maxFractionDigits : Maximum number of fraction digits after decimal point. Default is 0.

d. locale : Specify locale that allows to use locale specific format rules. By default, locale is accessed by LOCALE_ID which is en-US by default. LOCALE_ID is used to set the locale of the application.

2. Using percent Pipe

A. Using default format :
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 0
1. Find a number that will be changed into percentage.
TS code:

num1 = 2.5;

Now use Percent Pipe.
HTML code:

<p> {{num1 | percent}} </p>

Output: 250%
2.

{{0.05 | percent}}

Output: 5%
3.

{{0.5 | percent}}

Output: 50%
4.

{{1 | percent}}

Output: 100%
5.

{{5.5 | percent}}

Output: 550%
6.

{{5.05 | percent}}

Output: 505%
7.

{{5 | percent}}

Output: 500%

B. Custom format with digitsInfo
1. Use format '2.2-5'
minIntegerDigits = 2
minFractionDigits = 2
maxFractionDigits = 5
Find the number that will be changed into percentage.

num1 = 2.5;

Use Percent Pipe.

{{num1 | percent:'2.2-5'}}

Find the output.

250.00%

We will observe that there are two digits in fraction part. This is because minimum fraction digits required is 2.
Find another number with percent pipe.

{{2.523523523 | percent:'2.2-5'}}

Output : 252.35235%
We can see that maximum fraction digit is 5.
2.

{{0.05 | percent:'1.1-3'}}

Output: 5.0%
3.

{{0.05 | percent:'2.1-3'}}

Output: 05.0%
4.

{{0.05 | percent:'2.2-3'}}

Output: 05.00%

C. Custom format with digitsInfo and locale
1.

{{ 10.125 | percent: '2.1-3' : 'en_CA' }}

Output: 1,012.5%
2.

{{ 0.5234 | percent: '2.1-3' : 'en_US' }}

Output: 52.34%
3.

{{ 1.345 | percent: '2.1-3' : 'en_GB' }}

Output: 134.5%

3. Using PercentPipe in Component

To format number using PercentPipe in component, we can use its transform() method.
Find its syntax.

transform(value: number | string, digitsInfo?: string, locale?: string)

Example:
Instantiate PercentPipe with default locale.

const percent = new PercentPipe("en_US");

Format the number using transform() method.

const n = 0.03;
const out1 = percent.transform(n);
console.log(out1); // 3%

const out2 = percent.transform(n, '1.2-3');
console.log(out2); // 3.00%

const out3 = percent.transform(n, '2.2-3', "en_GB");
console.log(out3); // 03.00%

4. Complete Example

percent.component.html

<h3>Percent Pipe</h3>
<div>
  <p> {{num1 | percent}} </p>
  <p> {{num1 | percent:'2.2-5'}} </p>
  <p> {{num2 | percent:'1.2-5' : 'en_CA'}} </p>
  <p> {{num1 * num2 | percent:'1.2-3' : 'en_GB'}} </p>
</div>

percent.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule, PercentPipe, TitleCasePipe } from '@angular/common';

@Component({
  selector: 'app-percent',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './percent.component.html'
})
export class PercentComponent implements OnInit {
  num1: number = 2.5;
  num2: number = 0.5;

  ngOnInit(): void {
    this.convertInTitleCase();
  }
  convertInTitleCase() {
    const percent = new PercentPipe("en_US");

    const n = 10.1125;
    const out1 = percent.transform(n);
    console.log(out1); // 1,011%

    const out2 = percent.transform(n, '2.2-5');
    console.log(out2); // 1,011.25%

    const out3 = percent.transform(n, '2.2-5', "en_GB");
    console.log(out3); // 1,011.25%
  }
}

Find the print-screen of the output.

5. Reference

PercentPipe

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5