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

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 "

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