Comment utiliser le pipe currency sur Angular ?

Démonstration interactive

Entrée:

Décimales min-max:

Devise:USDEURGBP

Résultat:

42,42 $US

Syntaxe Angular:

{{ 42.42 | currency:'USD':'symbol':'1.0-2' }}

Dans le développement d'applications web, l'affichage correct des valeurs monétaires est crucial pour une bonne expérience utilisateur. Angular facilite cette tâche grâce au pipe currency. Ce pipe permet de formater les nombres en valeurs monétaires, en tenant compte des différentes devises et formats locaux.

Qu'est-ce que le pipe currency ?

Le pipe currency en Angular est un outil de transformation qui prend un nombre en entrée et le convertit en une chaîne formatée représentant une valeur monétaire. Il permet de spécifier la devise, le format d'affichage et d'autres options de formatage.

Utilisation de base

Dans les templates

La façon la plus simple d'utiliser le pipe currency est directement dans vos templates Angular :

<p>{{ 42.42 | currency }}</p> <!-- Par défaut en USD: $42.42 -->
<p>{{ 42.42 | currency:'EUR' }}</p> <!-- En euros: €42.42 -->
<p>{{ 42.42 | currency:'CAD':'code' }}</p> <!-- Code de devise: CAD 42.42 -->

Dans le code TypeScript

Vous pouvez également utiliser le pipe currency dans votre logique de composant. Voici un exemple :

import { Component } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { inject } from '@angular/core';

@Component({
  selector: 'app-price-formatter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Prix original : {{ price }}</p>
    <p>Prix formaté : {{ formatPrice(price, 'EUR') }}</p>
  `
})
export class PriceFormatterComponent {
  price = 42.42;
  
  private currencyPipe = inject(CurrencyPipe);

  formatPrice(price: number, currency: string): string | null {
    return this.currencyPipe.transform(price, currency, 'symbol-narrow');
  }
}

Options de formatage

Le pipe currency accepte plusieurs paramètres pour personnaliser le formatage :

1. currencyCode: Code de la devise (par exemple, 'USD', 'EUR', 'GBP').
2. display: Format d'affichage de la devise. Peut être :
   • 'code': Affiche le code de la devise (par exemple, 'USD 42.42')
   • 'symbol': Affiche le symbole de la devise (par défaut, par exemple '$42.42')
   • 'symbol-narrow': Utilise le symbole étroit de la devise si disponible
   • 'name': Affiche le nom complet de la devise (par exemple, '42.42 US dollars')
3. digitsInfo: Chaîne qui spécifie le nombre de chiffres avant et après la virgule.
4. locale: Spécifie la locale à utiliser pour le formatage.

Exemples :

<p>{{ 42.42 | currency:'EUR':'symbol':'1.0-0' }}</p> <!-- €42 -->
<p>{{ 42.42 | currency:'JPY':'code':'1.0-0':'ja-JP' }}</p> <!-- JPY42 -->

Avantages de l'utilisation du pipe currency

1. Flexibilité : Offre de nombreuses options de formatage pour s'adapter à différents besoins.
2. Internationalisation : Gère automatiquement différentes devises et formats locaux.
3. Performance : Optimisé par Angular pour des performances efficaces.
4. Cohérence : Assure un formatage cohérent des valeurs monétaires dans toute l'application.

Résumé

Pipe	Paramètres	Type d'entrée	Description
currency	value: number	number	Valeur à formater
	currencyCode?: string	string	Code de la devise (optionnel)
	display?: string	'code' | 'symbol' | 'symbol-narrow' | 'name'	Format d'affichage (optionnel)
	digitsInfo?: string	string	Format des chiffres (optionnel)
	locale?: string	string	Locale (optionnel)