Formatage de la devise avec un pipe dans Angular
Avec le pipe CurrencyPipe, il est possible
de formater l'affichage d'une devise. Le premier
paramètre du pipe attend le code de la devise
selon la spécification ISO 4217 (par
défaut USD). Dans le second paramètre, nous spécifions
le format d'affichage de la devise. Il peut prendre
les valeurs suivantes : 'code' (code
de la devise), 'symbol' (son symbole),
'symbol-narrow' (pour les pays qui possèdent
plusieurs symboles pour leur devise), 'string'
(pour afficher n'importe quelle chaîne de caractères). Dans le troisième
paramètre optionnel, nous pouvons spécifier le
format des nombres, similaire au pipe DecimalPipe.
Dans le quatrième paramètre optionnel, il est possible
d'indiquer le code de la locale utilisée :
<div>{{ value | number : code devise : format affichage devise : format nombre : code locale }}</div>
Exemples
Essayons le fonctionnement du pipe avec des exemples.
Pour cela, dans la classe du composant, définissons la
propriété suivante salary, contenant un
salaire dans une certaine devise :
export class AppComponent {
salary: number = 867.564;
}
Exemple
Convertissons notre nombre en devise :
<div>{{ salary | currency }}</div>
Résultat de l'exécution du code :
<div>$867.56</div>
Exemple
Maintenant, spécifions l'affichage de la devise en roubles russes :
<div>{{ salary | currency:'RUB':'code' }}</div>
Résultat de l'exécution du code :
<div>RUB867.56</div>
Exemple
Affichons le symbole du rouble russe à côté du nombre :
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
Résultat de l'exécution du code :
<div>₽867.56</div>
Exemple
Maintenant, affichons le nombre avec quatre chiffres après la virgule :
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
Résultat de l'exécution du code :
<div>RUB867.5640</div>
Exemple
Ajoutons la chaîne de caractères suivante à l'affichage de la devise :
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
Résultat de l'exécution du code :
<div>this is a new currency - 867.56</div>
Exercices pratiques
Nombre donné :
salary: number = 134.89;
Formatez-le comme suit :
'$134.89'
Nombre donné :
salary: number = 134.89;
Formatez-le comme suit :
'€134.89'
Nombre donné :
salary: number = 134.89;
Formatez-le comme suit :
'$134.890'
Nombre donné :
salary: number = 134.89;
Formatez-le comme suit :
'$0,134.8900'
Nombre donné :
salary: number = 134.89;
Formatez-le comme suit :
'this currency is changed 134.89'
