Angular Academy · Lesson

Plurals and Select (ICU)

Handle plurals and gendered text.

Plurals and Select (ICU) is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Plain Placeholders Are Not Enough

"You have 1 messages" is wrong English. Languages have different plural rules (some have several plural forms), and gendered or category-based wording. Angular handles this with ICU message format: plural and select expressions.

The plural Expression

An ICU plural chooses wording based on a number. You list cases by plural category and provide text for each.

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

Plural Categories

Categories include exact matches (=0, =1) and CLDR keywords: zero, one, two, few, many, and the required other. Different locales use different subsets automatically.

The Hash Placeholder

Inside a plural case, # is shorthand for the number being matched, so you do not repeat the binding.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

The select Expression

select chooses text based on a string value, ideal for categories like gender, status, or type.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

other Is Mandatory

Both plural and select require an other branch. It is the fallback when no specific case matches, and Angular will error if it is missing.

Combining with Surrounding Text

ICU expressions can sit inside normal translated text. Keep the full sentence in one i18n block so translators control word order.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

Nesting select Inside plural

ICU expressions nest, letting you express both quantity and category together when grammar demands it.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

Translators Adjust the Categories

When translated, a locale can add the plural forms its grammar needs (e.g. Russian uses one, few, many). The XLIFF target for an ICU unit contains the localized branches.

ICU in TypeScript with $localize

ICU syntax also works inside $localize tagged strings, so plural logic in component code stays translatable too.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

Why ICU Beats Manual if/else

Hardcoding count === 1 ? 'message' : 'messages' assumes English-style binary plurals. ICU delegates the rule to each locale's CLDR data, so languages with three or six plural forms render correctly without code changes.

Quick Check

Which ICU branch is always required?

Recap

ICU plural picks text by number using categories (=0, one, other) with # for the count, while select picks by string value. Both need an other branch, nest freely, work in $localize, and let each locale apply its own plural rules.

Frequently asked questions

Is the “Plurals and Select (ICU)” lesson free?

Yes — the full text of “Plurals and Select (ICU)” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Plurals and Select (ICU)”?

Handle plurals and gendered text. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Plurals and Select (ICU)” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy