Using the Plural Pipe in Angular 2+

This is a guide for how to use Angular’s Plural Pipe to show grammatically correct or custom messages in a reusable Angular component.

Let’s say we have a reusable component that shows a list of items as cards. We want to use this component to display different types of things such as Animals, Cities, or Friends…possibilities are endless. At the top of the component, we want display a helpful message to the user that indicates the magnitude of things in the list.

Let’s use 3 different types of items: Animal, Cities, and Friends.

For Animals and Cities, we just want to show grammatically correct messages. However, for a list of Friends, we want to show some custom messages. Our end result should look something like this:

Starter App Setup

I have set up an app with some basic components for displaying different item types.

To illustrate how the pipe works, I’ve added the ability to:

1. Set the item type — users can choose Animals, Cities, or Friends
2. Add/remove items — this will allow the user to see the different messages based on how many items there are

Later on, the “<My Message Here>” space will show the corresponding messages as I’ve laid out in the tables above. It will use Angular’s Plural Pipe to display the appropriate message.

The app has 2 reusable components:

1. List Component (outlined in blue), which contains all the items and the pluralized message
2. Card Component (outlined in red), which displays the item and some info about it

Use the Plural Pipe

Now let’s replace the “<My Message Here>” space with the text that we want to display based on the number of items in the list.

We will add some code to the List Component in the list.component.ts and list.component.html files.

These are the messages we want to display based on the thing “type” (animal, city, friend) and number of things (0, 1, 2, or 2+)

1. Import the Plural Pipe into the component that will display the message. In the case of my app, this is the List Component. Put this import statement at the top of the list.component.ts file:

import { I18nPluralPipe } from ‘@angular/common’;

2. Next, in the same component, create an object that will hold the information we defined in the table above.

itemPluralMapping = {
    'animal': {
      '=0' : '0 Animals',
      '=1' : '1 Animal',
      'other' : '# Animals'
    }, 
    'city': {
      '=0' : '0 Cities',
      '=1' : '1 City',
      'other' : '# Cities'
    },
    'friend': {
      '=0' : 'You have no friends, go out there and meet some!',
      '=1' : 'You have 1 friend, keep at it!',
      '=2': 'You have a few friends, I am impressed.',
      'other' : 'Wow, you have tons of friends!'
    },
  };

3. In the html of the component, list.component.html use the pipe to display the correct message. I will call the Plural Pipe in the h3 element that will hold my message.

<h3 class="text-center">
{{ data.length | i18nPlural: itemPluralMapping[item] }}
</h3>

Here, the list of items we want to display is in an array called data. Using the length of that array (data.length), and the type of item (item)we have in the array, we can choose and display the correct message from our itemPluralMapping object.

Final Result

This is what the app should look like:

item = ‘animal’, data[0] = [], message = “0 Animals”

item = ‘animal’, data[1] = [{animalObj}], message = “1 Animal”

item = ‘animal’, data[2] = [{animalObj}, {animalObj}], message = “# Animals”

To see what the messages for Cities and custom messages for Friends, look like you can pull down the repo and run npm install && ng serve to view the finished result.

Source code for the final product can be found here

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.