Internationalization in Angular

Here we come again!

Today we will learn how to implement the internationalization in angular easily and in a few steps.

Step 1: Add the necessary libraries to our package.json file.

"dependencies": {

...

"@ngx-translate/core": "8.0.0",

"@ngx-translate/http-loader": "2.0.0",

...

},

Step 2: Configure our application to use a folder of language files.

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({

declarations: [ AppComponent ],

imports: [

...

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: (createTranslateLoader),

deps: [HttpClient]

}

})

...

],

providers: [ ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

export function createTranslateLoader(http: HttpClient) {

return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

Step 3: Define a component where you can change the language.

language;

languages: Language[] = [

new Language("ca","CATALÀ"),

new Language("es","ESPAÑOL"),

new Language("en","ENGLISH")

];

constructor(private route: ActivatedRoute,

private translate: TranslateService) {

var userLang = "";

this.route.queryParams.subscribe(params => {

if(!params['lang'] || params['lang'] == "") {

userLang = this.language;

} else {

userLang = params['lang'];

}

console.log("queryParams:" + userLang);

if(!userLang || userLang == "") {

userLang = navigator.language;

}

if(userLang) {

userLang = userLang.toLowerCase();

if(userLang.length > 2) {

userLang = userLang.substring(0, 2);

}

}

if(userLang == "ca" || userLang == "es" || userLang == "en") {

this.changeLanguage(userLang);

} else {

this.changeLanguage("ca");

}

});

}

public changeLanguage(language) {

console.log(language);

// canviar l'idioma per defecte usat a les traduccions

this.translate.setDefaultLang(language);

// canviar l'idioma a usar per fer les traduccions

this.translate.use(language);

// canviem l'idioma seleccionat

this.language = language;

}

@NgModule({

imports: [ ... ],

declarations: [ ... ],

exports: [ ...],

providers: [ TranslateService ]

})

Step 4: Use the Pipe translate to get the translations of the language files.

pageComponent.html

...

{{ 'field' | translate }}

...

Step 5: Create the json files with the translations.

en.json

{

"field": "traduction of my first field"

}

Here we could make all the necessary translations in our pages and components.

If we wanted that when choosing a language, the other components and pages of our application were translated, where we had loaded arrays of information, we should do the following:

Step 1: Subscribe an Observable where to load the array.

projects: Project[];

public static updateStuff: Subject<any> = new Subject();

constructor(

private projectService: ProjectService) {

ProjectsComponent.updateStuff.subscribe(res => {

// here fire functions that fetch the data from the api

this.getProjects();

});

}

ngOnInit(): void {

this.getProjects();

}

getProjects(): void {

this.projectService.getProjects()

.then(projects =>

{ this.projects = projects }

);

}

Step 2: Call the Subscription when we change the language.

import { ProjectsComponent } from '../projects/projects.component';

public changeLanguage(language) {

...

ProjectsComponent.updateStuff.next(false);

...

}

I hope you have helped the tutorial.

Any questions, do not hesitate to ask.