Localization using Translate Service in Angular

We are quite familiar with the localization of web applications. Nowadays, when we develop a web application, we need to keep localization in mind. Localization simply means to translate the content in the native language of the country or place where the user of the application resides.

For the development of these apps, we need a well defined UI framework, and Angular solves that problem for us. Angular provides us a defined structure and it supports extended js libraries which makes the development easy for us.

For localization also, Angular provides a package referred as ngx-translate/core, which is quite easy to use and is efficient.

All we need to do is load our json files in the required module and use “| translate” (as pipe) in our HTML files after the key of our text for eg:

{{‘app.text’ | translate}}

Here “text” with a value let us say “Hello World” is our key provided in the localization json files. Let’s say we want the content to be loaded in the French language, for that we need to create a json file eg. fr.json for French, and in that we need to provide variables and text as key value pairs like {“app”: {“text”: “Bonjour World”}}, similarly for Engilish, we will create a en.json with the structure {“app”: {“text”: “Hello World”}}

We can also give the key/value as {“app.text”: “Hello World”} in the json file.

We need to include the Translate Loader and Translate module in the import section of out module and also provide the dependencies(in this case, json files) by using the HTTP multiple loader function, and call it by providing the currentLanguage as the argument, we can get that also by using the currentLanguage function of the translate service.

All of this seems fairly simple and easy to implement. But let’s say if need to pass a text to be rendered as a string from our component which needs to be localized, translate service provides us an option to do that as well with the instant method.

We just need to inject the Translate Service in the constructor of our component and we can use the instant method directly. It returns the value of the key “Hello World”, depending upon the language, for French it will be “Bonjour World”.

constructor(private _translateService: TranslateService){
const text = this._translateService.instant(‘app.text’);

This will work quite efficiently and will return the value “Hello World”, unless there is some delay in the loading of our json files in the browser in that case, this will return the key as the value i.e; app.text.

In that case, we need to look for an other option to translate our text, then we will use get method of the translate service. It is an async method which returns us the Observable of the string value, and when we will subscribe to it, we will get the actual value of the key i.e; “Hello World”

constructor(private _translateService: TranslateService){
this._translateService.get(‘app.text’).subscribe((translatedvalue) => {
const text = translatedValue});}

And the benefit is that it also takes an array of keys as an argument, so we can provide multiple keys and get their translated values in one go.

The loading of json files usually works fine in all the modern browsers, but in asynchronous programming, sometimes, when our app loads, and we need to translate some values, there might be the case that json files are not loaded, hence in that case, get method is preferred over instant to avoid any kind of issues.

Happy Coding !!