# 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.

POSTED BY
ARVIND RAI