Multilingual app


#1

I read somewhere that Ionic 2 will have its own multilanguage system.
I’m building a new app which will require to be translated into several languages.
How should I prepare my code to be compatible with the Ionic 2 multilanguage feature?
If it’s not possible, will I have to check/edit all m y code to make it work multilanguage when this feature will be published?


#2

:slight_smile:


#3

ng2-translate is not the future internal Ionic 2 feature.
I don’t want to redo everything when the Ionic 2 feature will be available.
So I can’t use it… unless ng2-translate and the future Ionic 2 multilingual feature are compatible?


#4

No one knows. If you access the service via filters/providers, you will be able to switch w/out changing your whole app.


#5

I have success integrating this library:

https://github.com/robisim74/angular2localization/blob/master/doc/spec.md


#6

@maxx0r What do you mean by using filters/providers ? I’m an Ionic newbie…

@dudubaiao Interesting and very complete…

…but it would be great if we could get some info from Ionic 2 dev team on how we should prepare our code to be ready when they will publish their multilingual feature…


#7

Im not sure wether ionic will pick a multilang feature. That will be done by the angular2 team, or external devs.

What i mean is writing you own provider with a getter for keys. Your provider handles the translation through an external tool. When that tool changes, you only need to change to provider, and you won’t need to change further code


#8

@Emmanuel_FRANCOIS did they talk about their plans?

It seems that this is more like an infrastructure issue, related to Angular 2, not necessarily an Ionic feature.


#9

My mistake ! I just retrieved some info about the multilang feature I mentionned: indeed, this will be an Angular2 feature, not an Ionic one… http://stackoverflow.com/questions/34797512/angular2-i18n-at-this-point
And it seems that it is not ready for now and will not be in a near future.

@maxx0r I see what you mean, it’s a kind of interface between pages templates and multilang api?
I think the simplest solution for now will be to use ng2-translate.
I’ll see later how to switch to Angular2 multilang feature if necessary…

Thanks for your answers and advices!


#10

It is in progress…

Take a look, the files contain pretty good comments. See localization.ts and pipes.

https://angular.io/docs/ts/latest/api/common/index/I18nSelectPipe-class.html
https://angular.io/docs/ts/latest/api/common/index/I18nPluralPipe-class.html

if you want to go with ng2-translate and switch to angular 2 internals i18n service when its finished then use a service that wraps the feature. That allows you to easily switch since you only need to change your wrapper.

Tutorial on how to set up ng2-translate with ionic 2:


#11

@CanKattw Thanks for precisions. I understand the concept of wrapping the multilanguage feature into a service, however, as a newbie with Ionic and Angular (coming from the almost dead Sencha Touch), I have no idea of how to accomplish that.
Would you have a link to a tutorial or documentation as a starting point for me?
I really enjoy Ionic 2, but as far as I can see, documentation is not obvious and complete…


#12

I chose to create my own Pipe (filter) that will transform the passed word into the translated word

  transform(value: string): string {
            if (Translator.currentLang === null || Translator.currentLang === undefined)
                Translator.currentLang = Translator.fallbackLang;
            let transVal = Translator.langBundle[Translator.currentLang][value];
            if (transVal === null || transVal === undefined)
                transVal = value;
            return transVal;
        }

Here is the Github source https://github.com/eigonic/ng2-translate