Angular › Internationalization (i18n) in Angular

How do you handle pluralization correctly across different languages in an internationalized Angular app?

Advanced

Answer

Angular's i18n system provides an ICU expression syntax specifically for plurals, letting you define separate translations for different count ranges directly inside your template, and Angular automatically picks the correct one based on both the language and the actual number being displayed.

<span i18n>{ itemCount, plural,
  =0 {No items}
  =1 {One item}
  other {{{ itemCount }} items}
}</span>

Real-world example A shopping cart correctly shows No items, One item, or three items in English, and automatically shows the correct grammatically different forms in a language with more complex plural rules, using Angular's built in ICU plural syntax.

Common follow-ups: Why do some languages need more than two plural forms while English only needs two?;How would you test that pluralization works correctly for every supported language?

Testing with Jasmine & Karma;Angular Style Guide & Best Practices