DEV Community

loading...

Angular I18nSelect Pipe πŸš€

maggy24 profile image Magdalena Chmura ・1 min read

I18nSelect is an Angular built- in pipe that takes a string as an argument and displays a corresponding value from the mapping object.

It is very useful especially when working with pluralization and gender information πŸ§‘πŸ½πŸ‘©πŸΌπŸ§‘

Let’s take a look at a simple party guest list πŸŽ‰
We’re going to introduce each of the guests. To do so we need to use the correct conjugations and pronouns. And here comes the i18nSelect pipe.

public guests = [
    {
      gender: "female",
      name: "Fallon",
      age: 27
    },
    {
      gender: "male",
      name: "Blake",
      age: 46
    },
    {
      gender: "other",
      name: "Miki",
      age: 32
    }
]
Enter fullscreen mode Exit fullscreen mode

Next step is creating the mapping objects.

  • genderMap is defining the mapping between gender and pronouns
  • verbMap is defining the mapping between gender and verbs
genderMap = { 
    male: "he", 
    female: "she", 
    other: "they" 
  };


  verbMap = { 
    male: "is", 
    female: "is", 
    other: "are" };
}
Enter fullscreen mode Exit fullscreen mode

Once the mapping rules are defined we are ready to use them in the template πŸ”₯

<div *ngFor="let guest of guests">
    <div>
        <span> This is {{ guest.name }}, </span>
        <span> {{ guest.gender | i18nSelect : genderMap }} </span>
        <span> {{ guest.gender | i18nSelect : verbMap }} </span>
        <span> {{ guest.age}} </span> year old.
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Output
output

Hope you're having a great one, and I'll see you for more 60 Seconds of Angular posts in the future πŸ₯³

In case you missed it:

Discussion (0)

Forem Open with the Forem app