Appearance
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é ​
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) |