Sometimes, the labels in our application might change slightly based on the state of the application. Sometimes, we may wish to pluralize strings to show when there are multiple items, and singularize them when there is only one. For example, maybe we wanted Authors to be able to be displayed as Author if there is only one author for our blog. Luckily, there are options in Angular to pluralize strings with i18n.
<a class="nav-link" routerLink="/authors" i18n="People who write blog posts|Primary link to list of blog authors">
{authorCount, plural, =1 {Author} other {Authors}}
</a>
Once exported, our /src/locale/messages.xlf file will be structured with a source reference listed as <x id="ICU"/>. This is actually a reference to the ICU message format, which Google uses as an international standard for its pluralization format. You can define the values for these dynamic localizations in the target section of a given localization file, such as /src/locale/messages.es.xlf:
<trans-unit id="0cdd51e152e616c0bb63333fcb36dd00b99c939c" datatype="html">
<source>
<x id="ICU"/>
</source>
<target>
{authorCount, plural, =1 {Autor} other {Autores}}
</target>
</trans-unit>
For the target of this translation, we can provide a language-specific ICU pluralization keyword with a definition. There are actually quite a few of these pluralization keywords available, and they can be chained together to cover many different types of pluralization in your application's localization:
Pluralization keyword | Example definition |
zero | No chickens |
other | Chickens |
one or =1 | A chicken |
two or =2 | A pair of chickens |
few | Some chickens |
many | Lots of chickens |
There are a lot of other ways to customize these messages as well, and you can learn more these about in the official ICU message format documentation and Angular's official i18n documentation, respectively:
http://userguide.icu-project.org/formatparse/messages
https://angular.io/docs/ts/latest/cookbook/i18n.html