Angular 10 formatPercent() Method

Last Updated : 09 Nov, 2022

In this article, we are going to see what is formatPercent in Angular 10 and how to use it. formatPercent is used to format a number as a percentage according to locale rules.

Syntax:

formatPercent(value, locale, digitsInfo)

Parameters:

value: The number to format.
locale: A locale code for the locale format.
digitsInfo: Decimal representation options.

Return Value:

string: the formatted percent string.

NgModule: Module used by formatPercent is:

CommonModule

Approach:

Create the Angular app to be used.
In app.module.ts import LOCALE_ID because we need locale to be imported for using get formatPercent.

import { LOCALE_ID, NgModule } from '@angular/core';

In app.component.ts import formatPercent and LOCALE_ID
inject LOCALE_ID as a public variable.
In app.component.html show the local variable using string interpolation
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import {
  formatPercent
 }
  from '@angular/common';

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31,this.locale,
          '3.0-4');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

<h1>
  GeeksforGeeks
</h1>

<p>Locale Percent is : {{curr}}</p>

Output:

Example 2:

app.component.ts

import {
  formatPercent
 }
  from '@angular/common';

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31,this.locale,
          '3.2-4');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

<h1>
  GeeksforGeeks
</h1>

<p>Locale Percent is : {{curr}}</p>

Output:

Example 3:

app.component.ts

import {
  formatPercent
 }
  from '@angular/common';

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31.21,this.locale,
          '3.0-4');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

<h1>
  GeeksforGeeks
</h1>

<p>Locale Percent is : {{curr}}</p>

Output:

Reference: https://angular.io/api/common/formatPercent

taran910

Improve

Article Tags :

Angular 10 formatPercent() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?