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 <br> element in the middle of that statement. Please fix your code in your question. — cobolstinks
– cobolstinks, Commented Mar 24, 2017 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
– Steven Barnett, Commented Mar 25, 2017 at 2: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
– nkadu1, Commented Mar 27, 2017 at 15:33

Halil İbrahim Karaalp · Accepted Answer · 2017-11-02 04:50:35Z

13

+100

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

answered Nov 2, 2017 at 4:50

Halil İbrahim Karaalp

1,2981 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ricardo · Accepted Answer · 2017-11-01 15:14:06Z

3

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)

answered Nov 1, 2017 at 15:14

Ricardo

2,48722 silver badges35 bronze badges

Comments

Ari · Accepted Answer · 2017-10-27 21:27:30Z

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, 2017 at 21:27

Ari

7,63411 gold badges43 silver badges77 bronze badges

Comments

Francesco Colamonici · Accepted Answer · 2017-11-02 07:30:30Z

1

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');

edited Nov 2, 2017 at 7:30

answered Oct 29, 2017 at 18:03

Francesco Colamonici

1,3071 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related