Not able to get dynamic translation of text using ngx translate/core - angular 2 typescript

Question

Problem :

I have dynamic text that is coming from Json file. I am using translate.get() method like this:

this.translate.get('keyInJson').subscribe(res => { 
                this.valueFromJson = res;
/*
creating an object using above text
*/
            });

As this is asynchronous I am not able to get the translated text when the page renders. I tried wrapping above method inside Observables , Promises but it's not able to get translated version of text during page load. I was able to get the translated text after trying different approaches but code became too complex and not reliable.

Expected/desired behavior Should load translated version of text

Reproduction of the problem Dynamically generate the text instead of hardcoding it on html and then try to render translated version.

Environment Angular2 , Typescript, Ionic 2

Answer 1

@nkadu1

instant(key: string|Array, interpolateParams?: Object): string|Object: Gets the instant translated value of a key (or an array of keys). This method is synchronous and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method.

const translated = this.translate.instant('keyInJson');

---

@masterach TranslateHttpLoader is what you're looking for. Here's an article which might be helpful for you.

Answer 2

Why don't you use the pipe in html instead of translating in ts?

<div>{{ 'HELLO' | translate:param }}</div>

or

<div [innerHTML]="'HELLO' | translate"></div>

Answer 3

I been using @ngx-translate from a while right now. I use the module in two ways:

1. Using the pipe:

{{'code_to_translate' | translate }}

1. Using the service

const translateText: string = this.translateService.instant('code_to_translate')

the translate service should be passed in the constructor of you component (or service )

usually I declare the string result in my app.ini function before load the components and use only one translation service for my entire application. I also declare my custom TranslateLoader to manage the source of translations from any place (external api, json file, etc)