Método Angular 10 formatPercent()

En este artículo vamos a ver qué es formatPercent en Angular 10 y cómo usarlo. formatPercent se usa para formatear un número como un porcentaje de acuerdo con las reglas locales.

Sintaxis:

formatPercent(value, locale, digitsInfo)

Parámetros:

• valor:
• lugar:

Valor devuelto:

NgModule: el módulo utilizado por formatPercent es:

• CommonModule

Acercarse: 

• Cree la aplicación Angular que se utilizará.
• En app.module.ts importa LOCALE_ID porque necesitamos que se importe la configuración regional para usar get formatPercent.

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

• En formato de importación app.component.tsPercent Zand LOCALE_ID
• inyecta LOCALE_ID como una variable pública.
• En app.component.html muestra la variable local usando la interpolación de strings
• Sirva la aplicación angular usando ng serve para ver el resultado.

Ejemplo 1:

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,){}
}

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

Producción:

Ejemplo 2:

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,){}
}

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

Producción:

Ejemplo 3:

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,){}
}

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

Producción:

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