How to retrieve translated value without changing current language in NGX Translate?

Question

My question is about ngx translate in angular2. My project supports 2 languages: English and Arabic and hence there is en.json and ar.json files. The below code will give me translated value of key based on my current language

this.translate.get('key').subscribe((msg: string) => {
    console.log(msg);
  }

Question: How do I pass a specific language as input and get the translation for that specific language? For eg, my current language is English (and don't want to change the current language), but from the ts file, I need to retrieve the Arabic translation for a key from ar.json without changing the current language.

Hershel

Did you try to use the examples in the How to use ngx-translate? section of the ngx-translate website? – Constituent

Answer 1

Also I didn't find any official solution but did this:

this.preferences.languages.forEach((lang) => {
   this.translate.getTranslation(lang).subscribe(values => {
     this.languages.push({ label: values.i18n.LANG, value: lang});
   });
 });

In which lang is something like 'en', 'pt', etc which must match with the name of the expected value for the argument of getTranslation.

Snuffer

Answer 2

I would recommend not to use ngx translate for this specific requirement. The purpose of ngx translate is to bind it to the view and load JSON of the currently selected language. The alternate is to simply setup another service which loads the json file which you need by passing a string e.g 'en' for English and 'ar' from Arabic. You can then use that JSON in your ts as needed.

Superabundant

Answer 3

I don't find any official solution, but I made workaround.

const interval = Observable.interval(1000);
const langObservable = Observable.from(['EN', 'PL']);
langObservable.zip(interval, (v1, v2) => {
  return v1;
}).subscribe(lang => {
  this.translate.getTranslation(lang).subscribe(values => {
    const value = values['TRANSALTION_KEY'];
    this.messageProvider.next(value);
  });

});

Tadzhik

Answer 4

Hello try this package https://www.npmjs.com/package/ngx-translate-in based on ngx-translate

You can get translattion in specific language other than the current one

{{'key' | translateIn : 'fr' | async}}

just import tjis module NgxTranslateInModule and use the pipe translateIn

Recuperate

how do you get at the translateIn object? – Polytechnic

Answer 5

Hi we found a way to do this behaviour (use translations with different language without changing the language of the system) with ngx-translate:

this.translateService.getTranslation(this.languageId).subscribe...

First we load the desired language transaltion in the translateService, after that we can look for the transalation in the service with:

var transaltedValue = this.translateService.getParsedResult(this.translateService.translations[this.languageId], 'resourceKey')

this can be used in the typescript and for the HTML you can make a pipe using the same logic

Addition

Answer 6

The official solution to retrieve updated translations:

let currentLanguageLocale = 'en'; //Any language locale like fr, es, ja, etc.
this.translateService.reloadLang(currentLanguageLocale).subscribe((response)=>{
    this.translateService.use(languageLocale);
});

Patch