📢 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 i18nPlural ?

Résultat:

One item

Syntaxe Angular:

{{ 1 | i18nPlural:{'=0': 'No items', '=1': 'One item', 'other': '# items'} }}

L'internationalisation (i18n) est un aspect crucial du développement d'applications web modernes. Angular fournit plusieurs outils pour faciliter ce processus, dont le pipe i18nPlural. Ce pipe est particulièrement utile pour gérer les formes plurielles dans différentes langues.

Qu'est-ce que le pipe i18nPlural ?

Le pipe i18nPlural en Angular est un outil de transformation qui permet de sélectionner une chaîne de caractères en fonction d'une valeur numérique, en tenant compte des règles de pluralisation de la langue cible.

Utilisation de base

Dans les templates

Voici comment utiliser le pipe i18nPlural dans vos templates Angular :

html
{{ value | i18nPlural:mapping }}

value est le nombre qui détermine quelle forme plurielle utiliser, et mapping est un objet qui définit les différentes formes plurielles.

Exemple :

html
{{ messages.length | i18nPlural: messageMapping }}

Avec le mapping défini dans le composant :

typescript
messageMapping: {[k: string]: string} = {
  '=0': 'Aucun message.',
  '=1': 'Un message.',
  'other': '# messages.'
};

Dans le code TypeScript

Bien que moins courant, vous pouvez également utiliser le pipe i18nPlural dans votre logique de composant. Voici un exemple :

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

@Component({
  selector: 'app-message-count',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>{{ getMessageText(messageCount) }}</p>
    <button (click)="incrementCount()">Ajouter un message</button>
  `
})
export class MessageCountComponent {
  messageCount = 0;
  private i18nPluralPipe = inject(I18nPluralPipe);

  messageMapping: {[k: string]: string} = {
    '=0': 'Aucun message.',
    '=1': 'Un message.',
    'other': '# messages.'
  };

  getMessageText(count: number): string {
    return this.i18nPluralPipe.transform(count, this.messageMapping);
  }

  incrementCount() {
    this.messageCount++;
  }
}

Fonctionnement du mapping

Le mapping pour le pipe i18nPlural fonctionne comme suit :

  • Les clés commençant par = correspondent à des valeurs exactes.
  • La clé other est utilisée pour toutes les autres valeurs.
  • Le symbole # dans la valeur est remplacé par le nombre réel.

Internationalisation avancée

Pour une véritable internationalisation, vous devriez utiliser les outils de traduction d'Angular plutôt que de coder en dur les chaînes dans votre application. Par exemple :

html
{{ messages.length | i18nPlural: {
  '=0': 'No messages.',
  '=1': 'One message.',
  'other': '# messages.'
} | translate }}

Ici, le pipe translate (qui n'est pas inclus dans Angular par défaut) serait responsable de la traduction effective des chaînes.

Avantages de l'utilisation du pipe i18nPlural

  1. Flexibilité : Permet de gérer facilement différentes formes plurielles.
  2. Internationalisation : Facilite la création d'applications multilingues.
  3. Lisibilité : Rend le code plus clair en séparant la logique de pluralisation du reste du code.
  4. Réutilisabilité : Les mappings peuvent être réutilisés dans toute l'application.

Cas d'utilisation courants

  • Affichage du nombre d'éléments dans une liste.
  • Messages de confirmation ou d'erreur basés sur des quantités.
  • Descriptions de produits ou de services basées sur des quantités.

Résumé

PipeParamètresType d'entréeDescription
i18nPluralvalue: numbernumberValeur numérique pour déterminer la forme plurielle
pluralMap: {[k: string]: string ObjectMapping des formes plurielles

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