Angular I18nSelect Pipe 🚀

Magdalena Chmura — Thu, 11 Feb 2021 18:29:03 +0000

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 🥳

Angular KeyValue Pipe 🚀

Magdalena Chmura — Mon, 08 Feb 2021 08:19:36 +0000

KeyValue pipe is an Angular built-in feature that transforms objects or maps into an array of key-value pairs.

If you've been working with Angular since its early versions, you might have missed it as the KeyValue pipe was introduced in Angular 6.1.

Let's see it in action 🔥

Imagine a simple object that stores student's names as a key and an array of grades as a value.

  const students = {
    Susane: [4, 3, 2, 1, 5],
    Jenifer: [3, 5, 2, 2],
    John: [5, 3, 3, 4, 1]
  };

With KeyValuePipe you can iterate over objects directly from the template.

<ul *ngFor="let student of (students | keyvalue)">
  <li>{{ student.key }}'s grades: {{ student.value }}</li> 
</ul>

It is a clean and declarative solution that will allow you to clean up your templates.

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

DEV Community: Magdalena Chmura

Angular I18nSelect Pipe 🚀

Angular KeyValue Pipe 🚀