📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser le pipe percent sur Angular ?

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 :

html
<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 :

typescript
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 :

html
<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é

PipeParamètresType d'entréeDescription
percentvalue: numbernumberValeur à formater en pourcentage
format?: stringstringFormat de nombre (optionnel)
locale?: stringstringLocale (optionnel)

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !