Formatage des nombres avec les pipes dans Angular
Avec le pipe DecimalPipe, il est possible
de formater les nombres. Dans le premier paramètre
du pipe, nous transmettons le nombre minimum de
chiffres dans la partie entière. Dans le deuxième paramètre,
nous indiquons le nombre minimum de chiffres dans
la partie fractionnaire. Dans le troisième paramètre optionnel,
nous définissons le nombre maximum de chiffres dans la partie fractionnaire.
Bien que notre pipe s'appelle
DecimalPipe, pour l'appeler nous écrivons
ainsi : number.
Essayons en pratique. Dans la classe du composant, définissons le nombre suivant :
export class AppComponent {
num: number = 18;
}
Exemple
Affichons notre nombre de manière à ce que sa
partie entière comporte deux chiffres. Par ailleurs,
le nombre minimum de chiffres dans la partie fractionnaire
sera de 1 :
<div>{{ num | number:'2.1' }}</div>
Résultat de l'exécution du code :
<div>18.0</div>
Exemple
Maintenant, spécifions que deux chiffres doivent apparaître dans la partie fractionnaire de notre nombre :
<div>{{ num | number:'2.2' }}</div>
Résultat de l'exécution du code :
<div>18.00</div>
Exemple
Définissons un nouveau nombre :
export class AppComponent {
num: number = 18.67899;
}
Et affichons-le dans le template HTML de manière à ce que deux chiffres maximum apparaissent dans la partie fractionnaire :
<div>{{ num | number:'2.1-2' }}</div>
Résultat de l'exécution du code :
<div>18.68</div>
Exemple
Maintenant, formatons notre nombre de manière à ce que sa partie entière comporte trois chiffres. Et que cinq chiffres apparaissent dans la partie fractionnaire :
<div>{{ num | number:'3.5-6' }}</div>
Résultat de l'exécution du code :
<div>018.67899</div>
Exemple
Essayons d'afficher un nombre minimum de chiffres dans la partie fractionnaire, dépassant la quantité définie dans le nombre. Dans notre cas, affichons six chiffres :
<div>{{ num | number:'3.6-8' }}</div>
En exécutant le code, nous verrons
que le pipe DecimalPipe a ajouté un zéro
à la partie fractionnaire :
<div>018.678990</div>
Exercices pratiques
Nombre donné :
num: number = 15;
Formatez-le comme suit :
'015.000'
Nombre donné :
num: number = 12.345;
Formatez-le comme suit :
'0012.345'
Nombre donné :
num: number = 12.345;
Formatez-le comme suit :
'12.3'
Nombre donné :
num: number = 12.345;
Formatez-le comme suit :
'012.34500'
Nombre donné :
num: number = -7.261;
Formatez-le comme suit :
'-007.3'
Nombre donné :
num: number = 100.261923;
Formatez-le comme suit :
'100.9226130'
Nombre donné :
num: number = 100.926613;
Formatez-le comme suit :
'0100.93'
