Free discovery callFree discovery call

Pluralization in Angular (ngPlural)

Unlock the power of localization with Angular's "ngPlural" directive.

DevelopmentLast updated: 15 Feb 20244 min read

By Marko Stjepanek

Many of us have encountered the problem of pluralization, where it was necessary to set a certain text in the correct form depending on the value of the variable. For example: 1 car; 2 cars. We came up with some workarounds to do this, but since version 10, Angular has added the ngPlural directive to angular/common.

What is pluralization?

Pluralization is a process of forming the plural of a word, which typically involves adding an inflection such as an -s or -es to the singular form of the word. However, not all languages have simple rules for pluralization. Some languages have multiple forms of pluralization for different types of nouns. In software development, pluralization is important for displaying text which is grammatically correct and appropriate for the context. On this website, you can find how pluralization works by language.

The English language for pluralization has one and other:

For the German language, it is the same as English:

The Croatian language is different from English and German. He includes: one, a few, and other:

Implementation

constructor(
	@Inject(LOCALE_ID) public locale: string // locale by default will be en-US
)

To use this directive you must provide a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] will display based on their expression. If the ngPluralCase value is set to a value starting with =, it will only display if the value matches the switch expression exactly.

As we saw for the English language there are categories: one and other. In category one is only number 1, and in the other is everything else. In this example, if the variable days is 0 because we put = as we said above it exactly matches the expression it would say “No days”. If the variable days would be 1 it would say “1 day”. If the variable days is 2, again because of the = it would say “Two days”. If the variable is any other number like 3,4,5 etc. it would say for example “5 days”.

<div [ngPlural]="days">
  <ng-template ngPluralCase="=0">No days</ng-template>
  <ng-template ngPluralCase="one">1 day</ng-template>
  <ng-template ngPluralCase="=2">Two days</ng-template>
  <ng-template ngPluralCase="other">{{ days }} days</ng-template>
</div>

Set different language

in app.module.ts we want to add a new language that will be used.

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [
	// remove comment of language you want to use
    { provide: LOCALE_ID, useValue: 'de-DE' },
    //{ provide: LOCALE_ID, useValue: 'hr-HR' },
  ],
  bootstrap: [AppComponent],
})

We got an error for locale “de-DE” because only the English language is implemented by default. So we have to add other languages if we want to use them. We are setting for German and Croatian because as we said in the beginning Croatian is a little different so we can show it later.

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import localeHr from '@angular/common/locales/hr';
import localeHrExtra from '@angular/common/locales/extra/hr';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);
registerLocaleData(localeHr, 'hr-HR', localeHrExtra);

German language, just like English has two categories: one and other. If the variable days is 1 it would say “1 Tag” and if the variable day is any other number 2, 5, 10.2, 12.8… it would say for example “8 Tage”.

<div [ngPlural]="days">
  <ng-template ngPluralCase="one">{{days}} Tag</ng-template>
  <ng-template ngPluralCase="other">{{days}} Tage</ng-template>
</div>

The Croatian language has three categories: one, few, and other. Most of the numbers that have the last number 1 are in category one, so for the example, it would be “1 sat”, “21 sat”, and “31 sat”. We don't have to know in our head what number is in what category. We just have to look at our table at the beginning for pluralization. For category few, it would be “2 sata” or “5.2 sata”. Category other would be “5 sati” or “10 sati”.

<div [ngPlural]="hours">
  <ng-template ngPluralCase="one">{{ hours }} sat</ng-template>
  <ng-template ngPluralCase="few">{{ hours }} sata</ng-template>
  <ng-template ngPluralCase="other">{{ hours }} sati</ng-template>
</div>

Here is an example where you can test this pluralization out.

Conclusion

In conclusion, the ngPlural directive in Angular makes it easy to handle different plural forms of text in an application. By specifying plural categories and associated text, developers can ensure the correct text is displayed based on the number of items. This feature simplifies creating user-friendly and linguistically correct applications. Overall, ngPlural is a valuable tool for Angular developers.

Thank you for your time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.

Related ArticlesTechnology x Design

View all articlesView all articles
( 01 )Get started

Start a Project