📢 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 number sur Angular ?

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 :

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

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

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

PipeParamètresType d'entréeDescription
numbervalue: numbernumberValeur à formater
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 !