Appseed IO
Published in

Appseed IO

Internationalize and Localize your Ionic 2 Application

Build a multi-language Ionic 2 app in minutes

  • We will use Supermodular 2 starter app and set it all up and running.
  • We will use Cordova Globalization plugin in order to make the app recognise the user’s device language settings.
  • We will use the ng2-translate library to load the appropriate language and allow the user to change the language of a screen from within the app.
  • Finally, we will configure the side menu so our new screen is included.

Download the code

PREREQUISITES

STEP 1: CLONE GITHUB REPO

$git clone https://github.com/appseed-io/supermodular2.git

STEP 2: INSTALL LIBRARIES

$npm install

STEP 3: INSTALL PLUGINS AND PLATFORMS

$ionic state restore

STEP 4: RUN THE APP

$ionic serve --lab
$ionic emulate ios

STEP 5: SCAFFOLDING THE I18N MODULE

STEP 6: RUN/TEST

STEP 7: INSTALLING NECESSARY LIBRARIES AND PLUGINS

$npm install ng2-translate --save
$cordova plugin add cordova-plugin-globalization

STEP 8: INITIALIZING THE ANGULAR TRANSLATE LIBRARY

STEP 9: USING THE ANGULAR TRANSLATE LIBRARY

SETTING THE USER LANGUAGE ON SCREEN LOAD

ALLOWING USER TO SET THE LANGUAGE IN APP

STEP 10: CREATING TRANSLATION FILES

FINAL RESULT

CONCLUSION

FOUND THIS TUTORIAL INTERESTING?

INTERESTING IN IONIC?

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stavros Kounis

Software developer and Javascript enthusiast, passioned with web and mobile technologies, skounis.github.io