Creating a multilingual application with Ngx-Translate: a simple approach
As being a part of a cultural minority, one action I always have to accomplish when starting a new angular project is the integration of ngx-translate. Their documentation is great and gives out a lot of information, but it is a little complex, to begin with.
Here the steps are broken down for you. Just open up the application you want to implement multiple languages on and let’s get going.
1. Installation
We will need to install two modules from ngx-translate.
Open the terminal and run:npm install @ngx-translate/core –saveAnd then:npm install @ngx-translate/http-loader --save
2. Configuration:
We will need to do a few things in the root module of your application.
Above the @NgModule declaration paste the following code:
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {return new TranslateHttpLoader(http);}
And in your imports array, add the following modules:
HttpClientModule,TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient],},}),
Your module should look like this:
Sharing the TranslateModule with other modules
If you are planning to use ngx-translate across other (not lazy-loaded) modules, make sure to add the translate module to the exports array.
For lazy loading, I will refer you to the official docs. You can find the link at the end of this article.
3. Set the default language
You want the default language to be loaded right at the beginning of your application, so we should implement it in the AppComponent.
To do so is very simple. Declare a private translate service in your constructor and use the setDefaultLang method on it. It accepts a string as a parameter (ex: “en”).
My approach, as you can see below is a little more complex. I want to push the language to the local storage of the browser so the visitors do not have to select their language every time they reload.
4. Creating a language service
If you look at the image below, there are three methods we will set in place:
- A get method that will pick up the language from local storage or default to a value if there is nothing stored yet. In this case, that would be the ‘fr’ for French.
2. A set method that receives a lang as a parameter, sets it in the local storage, and tells the translate module to use it.
3. And a switch method that will allow for a simple button to toggle between languages.
5. Creating the translation files.
The translation files are simple JSON objects, the name being a two-letter code you are using to refer to your languages. You need to create a folder named i18n in your assets folder. As with every JSON object, you will find a series of key-value pairs inside curly brackets. I tend to use uppercase for the key, as it is easy to spot in my code.
6. Testing
I love to separate my code into modules. The HomeModule contains the components that are needed on my homepage. Note that I have imported the TranslateModule.
To ensure my code is working, I am using the syntax below somewhere in my HomeComponent. At this point, you should see the text appear in the default language you previously set up. If you see HELLO on your browser, something went wrong.
7. Toggling between languages
Did I tell you I love to separate my code into modules? I am now importing it into my navigation module.
And I add the LanguageService to the constructor of the navigation-compoenent.ts file.
To make this work in now pretty simple. In a click statement, I call the switch function from my Language service.
You can see in the image above that I also call the language.get() method to have different content extracted from an object. This can be used for images, links, classes, styles, etc...
Conclusion
There is a lot more that can be done with Ngx Translate. Now that you know the basics, I do recommend reading their documentation (https://github.com/ngx-translate/core).
I hope this has helped you in your path to creating a multilingual application. Thanks for reading.
Cheers!
