Internalization Of Angular App

For making your application user-friendly to worldwide audience angular provides internationalization(i18n) tools which will make your app available in multiple languages.

Referenced  from angular official website angular.io and whole blog is described for Angular CLI projects.

Angular i18n features

• Translating text
• Displaying dates, numbers, percentages and currencies in local format
• Handling plural forms

Before practical implementation you need to be familiar with word Locale and Locale ID.

Locale

A locale is an identifier(id) that let sets language accordingly. For Example , If you wants to set french language then needs to set your locale fr .

A Unicode locale identifier is composed of a Unicode language identifier and (optionally) the character -followed by a locale extension. (For historical reasons the character _ is supported as an alternative to -.) For example, in the locale id fr-CA the fr refers to the French language identifier, and the CA refers to the locale extension Canada.

Default Angular Locale : en-US

To set your app’s Locale run following command in console

ng serve --configuration=fr

If using JIT then need to define LOCAL_ID provider in main module ( src/app/app.module.ts )

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from '../src/app/app.component';

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ AppComponent ],
 providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

For a complete list of locales supported by Angular, see the Angular repository.

i18n Pipes

To format data based on LOCALE_ID angular pipes can help withDatePipe, CurrencyPipe, DecimalPipe and PercentPipe.

By default, Angular only contains locale data for en-US. If you set the value of LOCALE_ID to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter --configuration with ng serve and ng build.

If you want to import locale data for other languages, you can do it manually:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

After this setup we are ready to go with angular i18n translation

Template Translation

Translating text of template in angular very simple just add i18n attribute in  any html tag. For Example :

<h1>Hello Reader</h1>

To translate above add i18n attribute in  <h1> tag

<h1 i18n>Hello Reader</h1>

Now we need to generate translation source file by following command

ng xi18n --output-path=locale

For complete reference for generating source files visit Angular’s guide

It will generate default​​​ message.xlf which file in src/locale folder.For french language simply make copy of message.xlf and rename with message.fr.xlf

For above give code i18n attribute will create <trans-unit> tag in .xlf file which will look like

<trans-unit id="ba0cc104d3d69bf669f97b8d96a4559aa3" datatype="html">
 <source>Hello Reader</source>
 ...
 </trans-unit>

<source> tag will contain actual text which i18n attribute read from template. we need to define <target> tag and put translated sentence.

<trans-unit id="ba0cc104d3d69bf669f97b8d96a4559aa3" datatype="html">
 <source>Hello Reader</source>
 <target>Bonjour lecteur</target>
 ...
 </trans-unit>

Now we are all done with i18n configuration. i18n attribute will replace text with <target> value  before angular compilation process starts.

Ways to define i18n attribute

To avoid repeating same words/ sentences in source file we can define i18n attribute with ID which can be defined by @@ prefix. See example below :

<h1 i18n="@@helloReaders">Hello Readers</h1>

For above written code source file will define with id="helloReaders" attribute and for all i18n attribute which contains @@helloReaders Id will be translated by below given <target> value

<trans-unit id="helloReaders" datatype="html">
 <source>Hello Reader</source>
 <target>Bonjour lecteur</target>
 ...
 </trans-unit>

To help translator with meaning and description angular provides ability to define it in i18n attribute :

<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>

In above written code  site header is meaning and rest of | separated sentence is description.

Translating Singular & Plural Forms

Angular i18n tools provides ability to handle pluralization with pretty better way.

Lets understand this with an example : I wants to display notification timing as Just now , One Minute Ago or x minutes ago . To handle this we can write code like this:

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

• First parameter is key which contains value actual value.
• Second parameter will identifies this  as plural translation type.
• And third parameter define pluralization pattern

Its translation source file will looks like this :

<trans-unit id="5a134dee893586d02bff11056b9cadf9abfad" datatype="html">
 <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
 <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
 </trans-unit>

That’s It for now. I hope you have enjoyed this and will be back soon with more interesting topics like this.

Thanks