Skip to content

Comment utiliser le pipe currency sur Angular ?

Pensez à importer CommonModule

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante à la liste des imports de votre module :

ts
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Ensuite, vous pouvez utiliser le pipe "currency" dans votre vue (template) en l'appliquant à un nombre en utilisant la syntaxe suivante :

html
{{ myNumber | currency }}

Cela affichera le nombre sous la forme d'une devise, en utilisant la devise par défaut de votre système. Si vous souhaitez utiliser une devise spécifique, vous pouvez le faire en fournissant un code ISO 4217 de la devise comme deuxième argument du pipe :

html
{{ myNumber | currency:'EUR' }}

TIP

L'ISO 4217 est une norme internationale qui définit les codes de devise pour les principales devises utilisées dans le monde. Ces codes de devise sont utilisés pour faciliter l'échange de devises et l'identification des devises dans les systèmes informatiques.

Chaque code de devise est composé de trois lettres. Par exemple, le code de devise pour l'euro est "EUR" et le code de devise pour le dollar américain est "USD". Ces codes sont utilisés dans les transactions internationales et les échanges de devises pour identifier clairement la devise utilisée.

Il existe environ 250 codes de devise dans l'ISO 4217, couvrant les principales devises utilisées dans le monde ainsi que certaines devises moins courantes. Vous pouvez trouver une liste complète des codes de devise sur le site web de l'ISO.

Cela affichera le nombre en euros. Vous pouvez également fournir d'autres options en utilisant un objet en tant que troisième argument du pipe, comme le symbole de la devise à utiliser, la position du symbole, etc.

html
{{ myNumber | currency:'EUR':{ symbol: '€', position: 'before' } }}

Cela affichera le nombre en euros, en utilisant le symbole € et en le plaçant avant le nombre.

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.