Comment utiliser le pipe i18nPlural ?

Entrée:

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

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 :

{{ value | i18nPlural:mapping }}

Où 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 :

{{ messages.length | i18nPlural: messageMapping }}

Avec le mapping défini dans le composant :

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 :

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 :

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

Pipe	Paramètres	Type d'entrée	Description
i18nPlural	value: number	number	Valeur numérique pour déterminer la forme plurielle
	pluralMap: {[k: string]: string	Object	Mapping des formes plurielles