How to Localise Your Ionic App with ngx-translate [v4]

ionic-4-localisation

If your Ionic app targets multiple markets it’s a good idea to add different language strings for different countries so all your users feel right at home.

Good thing there is the great nxg-translate library that we can add to our app to easily localise all the strings!

ionic-4-localisation

In this Quick Win we will build a simple language switcher app that can store the user preference and instantly change the apps selected language.

Setting up the Translate App

To get started we create a blank new app and install our library plus another package of that library so we can later load our local files. Also, we add another page and service plus the Ionic storage package in order to store the user preference. Go ahead and run:

To use all of our great packages we need to add them to our module. Also, we need to setup a special function for the translate package in order to resolve the local language files.

Now add this setup to your app/app.module.ts:

From the previous code you might already perceive that we need language files. You need to setup one for each language that you want to support in JSON format. Here is a simple file for our example that we need to put at assets/i18n/en.json:

You can structure your JSON so you can better order all your strings, like in the above example by page or feature.

To finish our setup I also added two images for the language flags which I got from this page!

In our case we need to put the files into assets/imgs/en.png so we can display them later in our language switch popover. Also add another language, whatever you prefer so we can implement and test the different languages later!

Changing the Language with a Service

The ngx translate will look up the selected language file and translate all strings, that’s the general logic. We can use it from anywhere but we wrap it inside our own service in which we always store the selected language with Ionic storage.

Whenever our app starts, we can now retrieve the value from the storage and call translate.use() to select a language. We also keep track of that information so we can correctly display the selected language later in our popover. Finally, we also got another function that returns the possible languages – of course tweak this for your needs!

Go ahead and change your app/services/language.service.ts to:

Alright, now we got a service which initially selects a language and through which we can change the language of the app at any time. But before we finally get into using our language strings, we need to make sure the functionality is called at every app start in order to set the right language, so change your app/app.component.ts to include the function call like this:

That’s it for the setup!

If you don’t want to have all of this logic you could also just use the current language of the browser using the globalization plugin on a device and then set the language based on that information.

Using ngx translate Service, Pipe and Directive

All previous actions were only the setup for ngx translate to use the right strings from our language files. Now it’s time to actually use the service in our page.

To do so, you first have to add it to the module file of your, so in our case change the app/home/home.module.ts to:

Now we got different options to use the translate service:

  • With a simple pipe to translate a certain key
  • With a pipe and parameters that we pass into the string
  • With a directive and optional parameters
  • Directly using the Service from code

For the view I added all but the last option, so change your app/home/home.page.html to:

The translate package will look up the key in the selected language file and as you can see, you can also use a path to your value.

Besides that, one of our strings also contains {{name}} which we can replace on the fly by passing that value as parameter to the pipe!

In order to pass the object, we need to create it in our pages logic of course like below. Also, in that page we can make use of the translate service directly from code!

Because we need the strings in that case immediately (like when opening an alert) we can call the instant() function to get their value.

Finally, we also add the code for opening our language switch popover, so go ahead and change the app/home/home.page.ts to:

Now you can already run your app and see at least the resolved strings for one language on the screen, but of course that’s not yet the end.

Switching our Language

We have implemented all the logic to switch our language at any time, so now it’s time to put this to use. Therefore, we need to retrieve all languages to display them in our popover along with the little flag icon.

Also, we need to get the current selected language to display everything correctly. Once we select a language we only need to call our service and the app will hopefully magically change the language. So go ahead and change your pages/language-popover/language-popover.page.ts to:

Now we just wrap things up by implementing a little popover view for our language selection, so open the pages/language-popover/language-popover.page.html and change it to:

Now the popover will appear with our languages and once we select one, the popover will close, our service selects the new language and finally also stores the user selected language for the next time!

Conclusion

In this Quick Win we implemented a language switcher, but if you only need less functionality you can also use the translate service only in the beginning of your app to select one of your created language files!

You can also find a video version of this Quick Win below.

Comments on How to Localise Your Ionic App with ngx-translate [v4]

Leave a Reply

Your email address will not be published. Required fields are marked *