Comment utiliser le pipe percent sur Angular ?

Entrée:

Décimales min-max:

Résultat:

3,14 %

Syntaxe Angular:

{{ 3.14159 | percent:'1.0-2' }}

L'affichage des pourcentages est une tâche courante dans de nombreuses applications web, que ce soit pour des statistiques, des progrès ou des analyses. Angular simplifie cette tâche grâce au pipe percent, un outil pratique pour formater les valeurs numériques en pourcentages.

Qu'est-ce que le pipe percent ?

Le pipe percent en Angular est un outil de transformation qui prend un nombre en entrée (généralement entre 0 et 1) et le convertit en une chaîne formatée représentant un pourcentage. Il gère automatiquement la multiplication par 100 et l'ajout du symbole '%'.

Utilisation de base

Dans les templates

La façon la plus simple d'utiliser le pipe percent est directement dans vos templates Angular :

<p>{{ 0.259 | percent }}</p> <!-- Par défaut : 26% -->
<p>{{ 0.259 | percent:'1.1-2' }}</p> <!-- 25.9% -->
<p>{{ 0.259 | percent:'2.2-2' }}</p> <!-- 25.90% -->

Dans le code TypeScript

Vous pouvez également utiliser le pipe percent dans votre logique de composant. Voici un exemple :

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

@Component({
  selector: 'app-percent-formatter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Valeur originale : {{ value }}</p>
    <p>Pourcentage formaté : {{ formatPercent(value, '1.2-2') }}</p>
  `
})
export class PercentFormatterComponent {
  value = 0.2590;
  
  private percentPipe = inject(PercentPipe);

  formatPercent(value: number, format: string): string | null {
    return this.percentPipe.transform(value, format);
  }
}

Options de formatage

Le pipe percent accepte un paramètre de formatage similaire au pipe number. Le format suit le modèle : {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits: Le nombre minimum de chiffres avant la virgule (par défaut 1).
• minFractionDigits: Le nombre minimum de chiffres après la virgule (par défaut 0).
• maxFractionDigits: Le nombre maximum de chiffres après la virgule (par défaut 0).

Exemples :

<p>{{ 0.2590 | percent:'2.2-2' }}</p> <!-- 25.90% -->
<p>{{ 0.2590 | percent:'3.3-3' }}</p> <!-- 025.900% -->
<p>{{ 0.2590 | percent:'1.0-0' }}</p> <!-- 26% -->

Cas d'utilisation courants

• Affichage de statistiques en pourcentage.
• Représentation de progrès dans des barres de progression.
• Présentation de résultats d'analyses ou de sondages.
• Affichage de taux de croissance ou de décroissance.

Résumé

Pipe	Paramètres	Type d'entrée	Description
percent	value: number	number	Valeur à formater en pourcentage
	format?: string	string	Format de nombre (optionnel)
	locale?: string	string	Locale (optionnel)