The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Localization is extremely important for software, especially as your app grows. Can you imagine not speaking the language in which an app is written and still trying to use it? In the past, it was hard to do localization in Ionic 2, as there were no solid Angular 2 localization libraries, but now, that has changed with NG2-Translate!

NG2-Translate Offers Simplicity

NG2-Translate is dead simple to use. It provides a pipe and a service with a few observables and methods that allow you to translate not only static HTML strings, but JavaScript values, too. This makes it very easy to implement into your existing Ionic 2 app and translate everything from the title of an alert to the name of your app in the navbar. Don’t you love it when things are this easy?

Angular 2 FTW

NG2-Translate is a perfect example of one of the biggest strengths of Ionic 2: being built with Angular 2. Because Ionic 2 is built with Angular 2, we get all the benefits of the Angular 2 ecosystem, including awesome libraries like this. And this means that as the Angular 2 ecosystem grows, the Ionic 2 ecosystem also grows, which provides nothing but benefits for Ionic 2 developers.

How to Use NG2-Translate in Your Ionic 2 App

If you’re intrigued by NG-2 Translate and interested in implementing it in your Ionic 2 app but are wondering how to get started, I’ve written a resources article that will walk you through exactly how to integrate NG2-Translate with your Ionic 2 app. With only a few steps, you’ll be opening your app to potentially millions of new users!

As you can see, Ionic 2 has now gained a new superpower, localization! Thanks to NG2-Translate, you can now be assured that your Ionic 2 app will be ready for your users, no matter what language they speak. Big shoutout to Olivier Combe for his amazing work on this library! Have fun making your Ionic 2 app ready for international use!

  • Fernando Muñoz

    ¡Muy bueno!

  • laser

    Yes, that is good translation module we use. Few additions, we are getting translations from our server, thus we have created our own translate loaders and missing translations (in case there is no translation for specific name, and use it even for English to English translations if something should be renamed).

    Our next steps is to load translations from localstorage (for backup) and then the server, when internet translation is loaded save it locally. In case there is no internet connection in beginning we will still get up to date translations.

    • http://blog.getelementsbyidea.com/ Olivier Combe

      If you have a good loader, don’t hesitate to share it with the community as an additional npm module, I can add a link to it on the repo

  • Rodrigo Fernández Romero

    Hi Justin,

    Thanks for the article. Does this mean that the “Ionic way” for doing i18n is ng2-translate? What about when the official Angular 2 i18n launches in RC6?

    https://github.com/angular/angular/issues/9104

    I checked around and it looks to work tightly with the offline compiler and all that stuff. Just wondering what are the pros and cons for each of them.

    Thanks!

    • Justin Willis

      Good Question! So this just means that at this moment in time the “Ionic way” of doing localization is ng2-translate. ng2-translate covers what 95% of users need for localization and works great with Ionic 2. We could possibly change to recommending the Angular localization package eventually, but i would say that for the foreseeable future we are gonna be recommending ng2-translate. Hope that answers your question!

  • Marinho Brandão

    Thank you for the article. I’m using `ng-translate`, but I’m annoyed by having to use `translateService.get().subscribe()….unsubscribe()` every time I just need a string.

    Do you know if there’s a “lighter” way to get a translation string programmatically without having to subscribe/unsubscribe?

    • http://blog.getelementsbyidea.com/ Olivier Combe

      Hello, you can do translateService.instant(‘key’), it’s a synchronous function, but you have to make sure that the translations files have been loaded

  • Aoki Sora
  • Shivam Singh

    Hi oliver, is ng-2 translate v5.0.0 compatible with Ionic v2, rc4. Because when i deprecate to ng-2 translate c2.2.2, it no more has teh TranslateModule as described in your resources link http://ionicframework.com/docs/v2/resources/ng2-translate/