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.
