Originally published by Jeetendra Gund at https://www.telerik.com
In this step-by-step tutorial, I will demonstrate how to create an Angular project and use an ngx-translate library for localization. This tutorial covers the following topics.
“In computing, internationalization and localization are means of adapting computer software to different languages, regional peculiarities and technical requirements of a target locale.” —Wikipedia
ngx-translate is the library for internationalization (i18n) and localization in Angular. It simplifies your Angular application to work for localization. It’s easy to set up and use in an Angular application. (For more details, visit GitHub.)
Following are the steps to create the Angular application using CLI:
> ng new angular-localization-demo
> cd my-localization-demo
> ng serve -o
Following are the steps to install the ngx-translate library:
> npm install @ngx-translate/core --save
> npm install @ngx-translate/http-loader --save
To use the ngx-translate library in the Angular application, follow these steps.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // localization module import import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HttpClientModule, HttpClient } from '@angular/common/http'; // loader module export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], exports: [TranslateModule], providers: [TranslateService], bootstrap: [AppComponent] }) export class AppModule { }
So far, we have seen how to create an Angular project, install ngx-library, and set it up in the Angular project. Next, we are going to learn how to play with it in components using the library. Following are the basic and simple steps for localization.
import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core';@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})export class AppComponent {
title = ‘angular-localization-demo’;
constructor(translate: TranslateService) {}
}
translate.setDefaultLang(‘en’);translate.use(‘en’);
{
“WelcomeMessage”: “Welcome to Angular Localization Demo”
}
{
“WelcomeMessage”: “Welkom bij de demo voor hoeklokalisatie”
}
<h1>
{{ ‘WelcomeMessage’ | translate }}!
</h1>
> ng serve -o
this.translate.setDefaultLang(‘nl’);
this.translate.use(‘nl’);
Once you change it as above and check in the browser, you will see the output as below image.
In the previous steps, we have seen that we have directly set the language in the constructor using the below two statements.
this.translate.setDefaultLang(‘nl’);
this.translate.use(‘nl’);
But, if you want your application localization to work on the basis of browser language, then what? Use the below method of TranslateService to get current browser language to set the default language.
const currentLanguage = this.translate.getBrowserLang();
this.translate.setDefaultLang(currentLanguage);
this.translate.use(currentLanguage);
Once you are done with the above changes, run your application. It will get your first browser language and apply it to the library. If you want to check for other languages, change your browser language from English to Dutch and restart the browser and hit the application URL. It will set Dutch as the language as per browser.
Note: This demo application is only working for English and Dutch language. If you want another language, you need to add that language JSON file and set that language as default.
You can also download this example from here.
In this article, we discussed what ngx_translate is and how to use it in Angular applications. After that we saw how to work with browser languages. If you have any suggestions or queries regarding this article, please contact me.
“Learn it, Share it.”
Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!
Follow us on Facebook | Twitter
☞ Angular 8 (formerly Angular 2) - The Complete Guide
☞ Angular & NodeJS - The MEAN Stack Guide
☞ The Complete Node.js Developer Course (3rd Edition)
☞ Best 50 Angular Interview Questions for Frontend Developers in 2019
☞ How to build a CRUD Web App with Angular 8.0
☞ React vs Angular: An In-depth Comparison
☞ React vs Angular vs Vue.js by Example
#angular