Comment utiliser le pipe number sur Angular ?

Entrée:

Décimales min-max:

Locale:en-USfr-FRde-DE

Résultat:

3.14

Syntaxe Angular:

{{ 3.14159 | number:'1.0-2':'en-US' }}

Le formatage des nombres est une tâche courante dans le développement d'applications web, que ce soit pour afficher des statistiques, des mesures ou simplement pour améliorer la lisibilité des chiffres. Angular simplifie cette tâche grâce au pipe number, un outil puissant et flexible pour le formatage des valeurs numériques.

Qu'est-ce que le pipe number ?

Le pipe number en Angular est un outil de transformation qui prend un nombre en entrée et le convertit en une chaîne formatée selon les paramètres spécifiés. Il permet de contrôler le nombre de chiffres avant et après la virgule, ainsi que d'autres aspects du formatage.

Utilisation de base

Dans les templates

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

<p>{{ 3.14159 | number }}</p> <!-- Par défaut : 3.142 -->
<p>{{ 3.14159 | number:'1.0-2' }}</p> <!-- 3.14 -->
<p>{{ 3.14159 | number:'3.1-2' }}</p> <!-- 003.14 -->

Dans le code TypeScript

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

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

@Component({
  selector: 'app-number-formatter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Nombre original : {{ value }}</p>
    <p>Nombre formaté : {{ formatNumber(value, '1.2-2') }}</p>
  `
})
export class NumberFormatterComponent {
  value = 3.14159;
  
  private decimalPipe = inject(DecimalPipe);

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

Options de formatage

Le pipe number accepte un paramètre de formatage sous forme de chaîne qui 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 3).

Exemples :

<p>{{ 3.14159 | number:'2.2-4' }}</p> <!-- 03.1416 -->
<p>{{ 3.1 | number:'2.2-4' }}</p> <!-- 03.10 -->
<p>{{ 3.14159 | number:'3.4-4' }}</p> <!-- 003.1416 -->

Cas d'utilisation courants

• Affichage de statistiques avec un nombre fixe de décimales.
• Formatage de mesures scientifiques ou techniques.
• Amélioration de la lisibilité des grands nombres.
• Alignement de colonnes de chiffres dans des tableaux.

Résumé

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