Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at Angular’s internationalization features to write locale-sensitive apps.

Angular and i18n

Internationalization is the process of designing and prepare an app to be usable in different languages.

Localization is the process of translating an internationalized app into specific languages for particular locales.

Angular can internationalize the displaying of dates, numbers, percentages, and currencies in a local format.

It can also prepare text in component templates for translation, handling plural forms of words, and handle alternative text.

Setting Up the Locale of an App

The locale is an identifier that refers to a set of user preferences that are shared within a region of the world.

For example, fr-CA is Canadian French and fr is just French.

i18n Pipes

We can use Angular pipes for internationalization. The DatePipe , CurrencyPipe , DecimalPipe and PercentPipe all use locale data to format data based on the LOCALE_ID .

For example, we can set the locale and use the DatePipe to display Canadian French dates as follows:

app.module.ts :

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule, LOCALE_ID } from "@angular/core";  
import { AppComponent } from "./app.component";  
import { registerLocaleData } from "@angular/common";  
import localeFr from "@angular/common/locales/fr";

@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule],  
  providers: [{ provide: LOCALE_ID, useValue: "fr-ca" }],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}registerLocaleData(localeFr, "fr");

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  date = new Date();  
}

app.component.html :

<div>{{date | date}}</div>

In the code above, we have the following in AppModule:

providers:\[{ provide: LOCALE_ID, useValue: "fr-ca" }],

to set the locale to Canadian French.

We also have:

registerLocaleData(localeFr, "fr");

to register or locale data.

We need both expressions whenever we want to use the internationalization features in our template.

Then we set the date in AppComponent and then reference it and pass it to the date pipe in our template.

Template Translations

We can add template translations with Angular.

To translate templates, we have to do 4 steps:

1. Mark static text messages in ou component templates for translation
2. Create a translation file by using the Angular CLI’s xi18n command to extract translations into a source file
3. Edit the generated translation fil;e
4. Merge the completed translation files into the app by using the Angular CLI’s build command with the --i18nFile option with the path of the translation file, --i18nFormat to specify the format of the translation file, and --i18nLocale with the locale ID

This replaces the original messages with the translated text and generates a new version of the app in the target language.

We mark the text with the i18n attribute to mark it for translation.

To do that, we write:

<h1 i18n>Hi</h1>

We can add a description and meaning as the value of the attribute:

<h1 i18n='Hi|Hello Message'>Hi</h1>

The text before the pipe is the meaning and the right text is the description.

We can specify a custom ID with @@ prefixed to our ID:

<h1 i18n="@@hi">Hi</h1>

We can also use it with a description:

<h1 i18n="Hello message@@hi">Hi</h1>

Translate Attributes

We prefix the attribute we want to translate with the i18n- prefix to mark it for translation.

For example, we can use the i18n-title to translate the title attribute. To do that, we write:

<img [src]="logo" i18n-title title="logo" />

Pluralization

Angular is also capable of pluralizing strings.

For example, we can do that as follows:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  minutes = 1;  
}

app.component.html :

<p i18n>  
  Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}}  
  minutes ago}}  
</p>

In the code above, we specified the minutes value in AppComponent .

Then in our template, we have the i18n attribute with:

=0 {just now} =1 {one minute ago} other {{{minutes}}  
  minutes ago}

to set the text for the what to display according to the value of minutes .

If it’s 0, we display ‘just now’. If it’s 1 we display ‘one minute ago’ and any other value we display {{{minutes}} minutes ago} .

Pluralization categories include (depending on the language):

• =0 (or any other number)
• zero
• one
• two
• few
• many
• other

Select Among Alternative Text Messages

We can do something similar for other text messages.

For example, we can write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  gender = "male";  
}

app.component.html :

<p i18n>  
  The author is {gender, select, male {male} female {female} other {other}}  
</p>

In the code above, we set the gender to 'male' , so we get the value 'male' displayed.

select selects the value of from the ones we indicated in the text that comes after it.

Then end result should display:

The author is male

Nesting Plural and Select ICU expressions

We can combine select and plural expressions together by nesting them.

For example, we can write:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  minutes = 3;  
  gender = "male";  
}

app.component.html :

<p i18n>  
  Updated: {minutes, plural, =0 {just now} =1 {one minute ago} other  
  {{{minutes}} minutes ago by {gender, select, male {male} female {female} other  
  {other}}}}  
</p>

to nest a select expression in a plural expression.

Then we get:

Updated: 3 minutes ago by male

displayed on the screen according to the values we set in AppComponent .

Conclusion

Angular has internationalization and localization features to make locale-sensitive apps.

The built-in pipes all support these features.

Also, it has libraries for making translations, pluralization, and selecting text according to values.