This repo contains the extra examples I've added to my previous post here.

More goodies

Based on one of the comments I got from Andreas Löw from CodeAndWeb GmbH, just wanted to introduce some tools you can use alongside ngx-translate which makes your day perfect.

A pluralisation plugin

First one is an npm package called ngx-translate-messageformat-compiler which allows you to compile translations using ICU syntax for handling pluralization and gender.

ICU Message Format is a standardized syntax for dealing with the translation of user-visible strings into various languages that may have different requirements for the correct declension of words (e.g. according to number, gender, case) - or to simplify: pluralization.

The complete guide can be found in their Github repository but to quickly show you how it can help you (I will skip the setup part as you can find it in the code repository on my GitHub).

Imagine you want to show a list of different categories of cats with their count on your web site which presumably helps a pet shop to show case what their current inventory is. here is how HTML will look like:

<ul>
  <li *ngFor="let cat of cats">
    <span translate [translateParams]="{ Count: cat.count, category: cat.category }">CATS</span>.
  </li>
</ul>

In your component you will have a list of cats categories and their count:

cats = [
    {
      count: 1,
      category: 'Aegean'
    },
    {
      count: 0,
      category: 'American'
    },
    {
      count: 4,
      category: 'Lykoi'
    }
  ];

And finally in your json file:

{
    "CATS": "There {Count, plural, =0{are no {category} cats} one{is one {category} cat} other{are # {category} cats}}"
}

No when you run your app you will see the list like this: