diff --git a/demos/i18n/index.ts b/demos/i18n/index.ts index 997da2be39..bdf66c9b61 100644 --- a/demos/i18n/index.ts +++ b/demos/i18n/index.ts @@ -3,10 +3,11 @@ import {Control, ControlGroup} from 'angular2/forms'; import {IonicApp, App, Http} from 'ionic/ionic'; -import {Translate} from 'ionic/ionic'; +import {Translate, TranslatePipe} from 'ionic/ionic'; @App({ - templateUrl: 'main.html' + templateUrl: 'main.html', + pipes: [TranslatePipe] }) class MyApp { constructor(app: IonicApp, trans: Translate) { @@ -18,8 +19,8 @@ class MyApp { }); console.log(this.trans.translate('Location')); - console.log(this.trans.translate('de', 'Location')); - this.trans.setLanguage('de'); + console.log(this.trans.translate('Location', 'de')); + //this.trans.setLanguage('de'); console.log(this.trans.translate('Location')); } diff --git a/demos/i18n/main.html b/demos/i18n/main.html index 1882213767..d73601f91c 100644 --- a/demos/i18n/main.html +++ b/demos/i18n/main.html @@ -1,12 +1,5 @@ - - Plugins + - - - + Hello! What is your {{ 'Location' | translate }} - - - + diff --git a/ionic/ionic.ts b/ionic/ionic.ts index 359ed77413..c7fa97ad3f 100644 --- a/ionic/ionic.ts +++ b/ionic/ionic.ts @@ -26,3 +26,4 @@ export * from './transitions/md-transition' export * from './platform/plugins' export * from './translation/translate' +export * from './translation/translate_pipe' diff --git a/ionic/translation/translate.ts b/ionic/translation/translate.ts index 61659a6f47..835433e57d 100644 --- a/ionic/translation/translate.ts +++ b/ionic/translation/translate.ts @@ -18,22 +18,18 @@ export class Translate { return this._transMap[lang]; } - translate(lang, key) { - // If called with just one param, first is the key - if(typeof key === 'undefined') { - key = lang; - lang = this._language; - } - - // If the language isn't specified, return the string passed. - if(!lang) { + translate(key, lang) { + // If the language isn't specified and we have no overridden one, return the string passed. + if(!lang && !this._language) { return key; } - let map = this.getTranslations(lang); + let setLanguage = lang || this._language; + + let map = this.getTranslations(setLanguage); if(!map) { - console.warn('I18N: No translation for key', key, 'using language', this._language); + console.warn('I18N: No translation for key', key, 'using language', setLanguage); return ''; } return this._getTranslation(map, key); diff --git a/ionic/translation/translate_pipe.ts b/ionic/translation/translate_pipe.ts new file mode 100644 index 0000000000..34181b6240 --- /dev/null +++ b/ionic/translation/translate_pipe.ts @@ -0,0 +1,30 @@ +import {Injectable, Pipe, PipeTransform} from 'angular2/angular2'; + +import {Translate} from './translate'; + +/** + * The Translate pipe makes it easy to translate strings. + * + * @usage + * Translate using the current language or language set through Translate.setLanguage + * {{ 'Please enter your location' | translate }} + * + * Translate using a specific language + * {{ 'Please enter your location' | translate:"de" }} + */ +@Pipe({name: 'translate'}) +@Injectable() +export class TranslatePipe implements PipeTransform { + constructor(translate: Translate) { + this.translate = translate; + } + transform(value, args) { + let lang; + if(args.length > 0) { + lang = args[0]; + } + return this.translate.translate(value, lang); + } + + supports(obj) { return true; } +}