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

The code sample you posted isn't valid typescript code. Yout have a html
element in the middle of that statement. Please fix your code in your question. — cobolstinks, Mar 24 '17 at 16:48
Could you provide more context of where the example code resides and where `valueFromJson` is used? If the above code is in, for example, the constructor of a component, and you want to use the value in the component's template, then you should be able to put `{{valueFromJson}}` in the template without issue. — Steven Barnett, Mar 25 '17 at 02:17
The example code resides in a function in global service, which I have injected in to my component. I am calling this function from a component's ngOnInit. — nkadu1, Mar 27 '17 at 15:33
duplicate ? https://stackoverflow.com/questions/35655361/angular2-how-to-load-data-before-rendering-the-component — Gabriel Bleu, Oct 26 '17 at 15:08
@masterach are you using `@ngx-translate/http-loader@0.1.0` ? — Krsna Kishore, Oct 27 '17 at 06:29
When does the translated text need to be available? How is it used? — Aluan Haddad, Oct 30 '17 at 03:14

score 13 · Answer 1 · answered Nov 02 '17 at 04:50

@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.

score 3 · Answer 2 · answered Nov 01 '17 at 15:14

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

Using the pipe:

{{'code_to_translate' | translate }}

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)

score 1 · Answer 3 · answered Oct 27 '17 at 21:27

1

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>

answered Oct 27 '17 at 21:27

Ari

7,251
11
40
70

Francesco Colamonici · Answer 4 · 2017-11-02T07:30:30.110

In your global service:

private _valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this._valueFromJson = res;
  });
}
get valueFromJson() {
  return this._valueFromJson;
}

Or:

public valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this.valueFromJson = res;
  });
}

Then, in your component template you can bind directly:

<div>{{ globalService.valueFromJson }}</div>

Alternatively, you can use a synchronous method:

this.valueFromJson = translate.instant('keyInJson');

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

4 Answers4

Linked