IONIC2 | Internationalization (i18n) of Ionic2 apps – Revised

abba Ionic2, Mobile App 1 Comment


Polish your apps by incorporating Internationalization (i18n) of Ionic2 apps and Localization

Revised to work with IONIC2 2.0.0-rc.0.
This post will explain how to implement Internationalization (i18n) of Ionic2 apps and localization (l10n) to externalize the strings in your ionic2 app. This post is based on Ionic2 version : 2.0.0-rc.0. Click here to learn more about i18n or l10n. You can read more about programming in ionic here. I will be using ng2-translate for this post.

This post uses the 2.0.0-rc.0 version of Ionic2, so make sure to update to 2.0.0-rc.0 version of Ionic2 as follows. Add the sudo keyword if the following installation fails.

Step 1: Install ng2-translate module via the npm command. Add the sudo keyword if the following installation fails.

Step 2: In app.module.ts, import the TranslateModule, TranslateStaticLoader and other required imports.

Step 3: In app.module.ts, Update @NgModule to add the provider for TranslateModule (Line: 9-14)

Step 4: In app.component.ts, Update the constructor with TranslateService and add call to initTranslation function. Don’t forget to add the import for TranslateService.

Step 5: In app.component.ts, add the initialization function for TranslationService.

Step 6: The preferred way is to keep the strings external to the code. Create the en.json file that will hold your translations strings for en locale, in src/assets/i18n folder. You can add additional json for all the languages supported in the src/assets/i18n folder.

Step 7: You can now use the externalized strings in your page1.html as :

Step 8: To get translated strings in your app.component.ts, you can use as follows:

Step 9: In your page templates ts file, you do not need to do anthing.
Step 10: In your page template html file, you can use translate as follows:

Other articles of interest