Hello guys,

Today, I will tell you “How to implement Internationalisation in an ionic app” using the ‘ng2-translate’ and ‘Cordova Globalization plugin’.

Let’s get started, First, we have to install the necessary library and plugin that are shown below:-

Creating Translation Files

The simplest way of providing the translation values for a language is assigning each string to a translation key and creating a JSON file containing all the keys of the strings that need to be translated and the related translated text. Since we set the path to our JSON files to “/src/assets/i18n/”, create an i18n folder under the “/src/assets/ “ path and create the ‘en.json’ file for the all the text in English and the ‘de.json’ file for the text in German.

Thus, all the highlighted keys in our template will be included in the ‘en.json’ file that will have the following structure:

Similarly, the ‘de.json’ file will be:

Now, We must import ng2-translate in ‘app.module.ts’ file of the project.

Now, Load ‘TranslateLoader’, ‘TranslateModule’ and create custom ‘TranslateLoader’ that will be used by ‘TranslateModule’  which are shown below.

Now, Setting the user language on the platform ready in ‘app.component.ts’ file as shown below.

Now, It is time to create the HTML template where we are going to display the translated text.

Now, Create ‘language.html’ and ‘language.ts’ file for changing the language in the whole application.

Similarly,  ‘language.ts’ file is shown below.

I hope you have found this blog useful. If any extra information is required please comment below.

Happy Coding. 🙂