📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser le pipe currency sur Angular ?

Démonstration interactive

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 :

html
<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 :

typescript
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 :

html
<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é

PipeParamètresType d'entréeDescription
currencyvalue: numbernumberValeur à formater
currencyCode?: stringstringCode de la devise (optionnel)
display?: string'code' | 'symbol' | 'symbol-narrow' | 'name'Format d'affichage (optionnel)
digitsInfo?: stringstringFormat des chiffres (optionnel)
locale?: stringstringLocale (optionnel)

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !