When developing applications with support for several languages, it is easy for the translation of the contents to come as a challenge for the developers. In this blog post we are going to walk you though various steps to help facilitate this task, using the ngx-translate library. 

The ngx-translate is a library that allows the dynamic uploading of translation files in our angular applications, this dynamic uploading file capability allows us to change the applications language without having to reload the screen. Follow these steps and see for yourself!

 

Step 1: Create an angular application. 

To get started, we will create a new angular project using angular cli, for which we will execute the following from our terminal:

>> ng new “my-app” 

This command will create a new angular application.

 

Step 2: Install ngx-translate. 

From there, tdownload the translations module and the ngx-translate translations loader, we must execute the following commands from our terminal: 

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

 

Step 3: Create language files. 

After installing the translation modules we will then create the translations files, inside the assets folder we will create an i18n folder, which will contain such files. 

We will create two JSON files inside the folderen.json and es.json, with the corresponding translations of each of the languages. 

 

// en.json

{
    "home": {
        "title": "Internationalization of an angular application",
        "englishLabel": "English",
        "spanishLabel": "Spanish"
    }
}
// es.json

{
    "home": {
        "title": "Internacionalización de una aplicación angular",
        "englishLabel": "Ingles",
        "spanishLabel": "Español"
    }
}

 

Step 4: Configuration of ngx-translate. 

The following step is to configure the translation service for which we will import the translation modules within the app.module.ts, we also need to import the module and the http client, for the correct functioning of the translation service we are going to use. 

We will also create a factory in the file app.modulo.ts to upload the translation files: 

 

// app.module.ts

import { HttpClientModule, HttpClient } from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

 

This factory will be responsible for uploading the different language files in the application, of the i18n folder depending on the language selected at the time. For example, if the selected language is English (en), the factory will upload the assets / i18n / en file. json. 

To conclude the application configuration, we will add the upload configuration to the import of the app.module.ts of the translation service. 

 

imports: [
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient]
        }
    })
  ],

 

Step 5: Use of translations. 

The next phase is to use our translations in a component. For this, we will modify the file app.component.ts. 

The first thing we need to do is to change the behaviour of the component, for which we add a selectedLanguage variable. Lets say we select English (en), this language will then be saved. 

Within the constructor of the component we inject the translation service that will allow us to change the selected language, in addition we will establish the default language by means of the setDefaultLang () function, we select the default language and the current language with use (). 

Finally, we need to create a function to change the language toogleLanguage (). 

  

selectedLanguage = 'es';

    constructor(private translateService: TranslateService) {
        this.translateService.setDefaultLang(this.selectedLanguage);
        this.translateService.use(this.selectedLanguage);
    }

    toogleLanguage(lang: string) {
        this.translateService.use(lang);
    }

 

The following step is to create a template that will consist of a title and a selector to change the language, to translate the texts we use the pipe translate which is passed to the translation of the json files as a parameter the reference, with the title ‘home.title 

 

template: `
<div style="text-align: center;">

&nbsp;
<h1>{{ 'home.title' | translate }}</h1>
<select>
<option value="es">{{ 'home.spanishLabel' | translate }}</option>
<option value="en">{{ 'home.englishLabel' | translate }}</option>
</select>

</div>
`,

 

The selector will allow the language change when the selected value changes, for this it will execute the toogleLanguage function. 

With the file app.component.ts remaining.  

 

// app.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    template: `
<div style="text-align: center;">

&nbsp;
<h1>{{ 'home.title' | translate }}</h1>
<select>
<option value="es">{{ 'home.spanishLabel' | translate }}</option>
<option value="en">{{ 'home.englishLabel' | translate }}</option>
</select>

</div>
`, styleUrls: ['./app.component.css'] }) export class AppComponent { selectedLanguage = 'es'; constructor(private translateService: TranslateService) { this.translateService.setDefaultLang(this.selectedLanguage); this.translateService.use(this.selectedLanguage); } toogleLanguage(lang: string) { this.translateService.use(lang); } }

 

To test the application we launch 

>> npm start 

And we open our browser on localhost: 4200 

 

 

 

If we modify the selected language, like in the following images

 

 

Using the ngx-translate internationalization library, we will have created an angular application with support for multiple languages in only a few steps. Why don’t you give it a try?