Internationalization & Localization - Angular

Hi everyone, after a long break, I thought to write something interesting and easy to learn. I know most of you familiar with angular (which is a javascript framework). Today I will teach you how to localize your angular project using ngx translate and loader libraries.

Ngx-translate is an internationalization library for angular which can be used to translate your angular project.

Setup

First thing you need to do is install the ngx-translate library. For that go inside to your angular project, open up the command prompt and enter this command.

npm install @ngx-translate/core --save

Now you have to install another library called http-loader for ngx-translate that loads translations using http. You can use the following command for that. 

npm install @ngx-translate/http-loader --save

After that, you need to configure the AppModule for loading the i18n files where the translated content is located. You can add these lines to your app.module.ts file. If not you can create a separate module for the translations.

Then create a new folder in assets folder which is called i18n. This would load the translations from /assets/i18n/<locale-code>.json. <locale-code> is the placeholder for all the languages you provide. For an example: English (en-GB).Here you can create your default language file and the file that includes the translations of  your default language content.

Example:

en-GB.json

nb-NO.json

The next step initializes the TranslationService. Here, you have to tell the app what the default language should be. The default language will be used in cases where no translation in the target language exists. For that first you need to import TranslationService from ngx-translate library.

Well done! Your app is now ready for i18n. Now we can translate your app content. 

Translate The Content

ngx-translate provides three ways to localize the content. 

1. TranslationService, 
2. TranslatePipe or 
3. TranslateDirective 

Use the TranslationService if you need to localize content in one of your services or controllers.

translate.get('my_meaningful_id').subscribe((res: string) => { ... });

For translating content in your html files you can use the TranslatePipe:

<h1>{{ 'my_meaningful_id' | translate }}

In addition to the pipe you can use the TranslateDirective to translate the content in your view. I normally use this method. You can choose any method you like. It's up to you.

<div translate>my_meaningful_id</div>

Localizing single attributes of an HTML-Tag is not possible. Therefore you need to set up the whole tag as a translation which is no problem at all. You only need to use the innerHTML-Attribute and it should work out of the box:

<h1 [innerHTML]="'key_id_with_html_content' | translate"></h1>

Now you can successfully translate your application. Congrats!

Hope I added something to your knowledge.  Let's meet again with another interesting tutorial. Thanks for reading!

Kalpani