Angular I18nSelect Pipe 🚀

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
    }
]

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" };
}

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>

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:

• Angular KeyValue Pipe 🚀