Skip to content

Comment utiliser le pipe i18nPlural ?

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 "i18nPlural" dans votre vue (template) en l'appliquant à une valeur numérique en utilisant la syntaxe suivante :

html
{{ myNumber | i18nPlural:myOtherPipe:myValues }}

Le pipe "i18nPlural" prend trois arguments :

  1. La valeur numérique sur laquelle le pipe "i18nPlural" sera appliqué (ici, myNumber).
  2. Un autre pipe (ici, myOtherPipe) qui sera utilisé pour formater la valeur avant qu'elle ne soit utilisée par "i18nPlural".
  3. Un objet contenant les différentes valeurs à utiliser en fonction du nombre (ici, myValues). Voici un exemple concret de comment cela pourrait être mis en œuvre :

Voici un exemple concret de comment cela pourrait être mis en œuvre :

ts
import { Component } from '@angular/core';
import { I18nPluralPipe, DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  providers: [I18nPluralPipe, DecimalPipe]
})
export class MyComponent {
  myNumber = 12345.678;

  myOtherPipe = new DecimalPipe('en-US');
  myValues = {
    0: 'no items',
    one: '1 item',
    other: '# items'
  };
}

Dans cet exemple, le pipe "i18nPlural" est utilisé avec le pipe "decimal" pour formater la valeur numérique en utilisant les conventions de formatage des nombres en anglais (États-Unis). Le pipe "i18nPlural" est ensuite utilisé avec un objet contenant les différentes valeurs à utiliser en fonction du nombre.

Le résultat final affichera "no items" si la valeur est égale à 0, "1 item" si la valeur est égale à 1, et "# items" pour les autres valeurs, où "#" sera remplacé par la valeur formatée en utilisant le pipe "

[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.