Angular ngx-translate getTranslation issue

Question

I am using ngx-translate to translate my Angular Web-app, and it seems that ngx-translate has an issue with the function getTranslation(language). When it's called, it changes the current language ?temporarly? and then my component is not displayed in the right language.

export class InputRadioComponent extends FormComponentInput implements OnInit {
  constructor(protected formDynamicS) {
  }

  public ngOnInit() {
    this.translate.getTranslation("fr").subscribe(res => {
      this.choose["fr"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("en").subscribe(res => {
      this.choose["en"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("de").subscribe(res => {
      this.choose["de"] = res['form-component']['choose-answer'];
    });
  }
}

In this case, like this.translate.getTranslation("de") is the last call, my component is always displayed in german. I find a workaround but it's not something I want to keep on my code. Here is my workaround :

let languages: string[] = ["fr", "en", "de"];

languages.splice(languages.indexOf(this.translate.currentLang));
languages.push(this.translate.currentLang);

languages.forEach((language) => {
  this.translate.getTranslation(language).subscribe(res => {
    this.choose[language] = res['form-component']['choose-answer'];
  });
});

It allows me to keep the currentLang, because it will be the last call by getTranslation

Khalilahkhalin

Answer 1

I encountered the same problem just now. I had to use cloneDeep (lodash method) to fix the problem.

const translateDeepCopy = cloneDeep(this.translate);

translateDeepCopy.getTranslation(lang).subscribe(res => {
  
});

Marleenmarlen

That's an horrible way to get the correct translation, but I think that's the best solution so far. As there is no good answer because this is a bug, I'll validate your answer, thanks for your solution ! – Khalilahkhalin

Answer 2

I agree, that this is a rather strange behaviour. But referring to your workaround you could have an easier solution to reset the language.

just call

this.translate.use('<LANGUAGE>');

e.g.

this.translate.getTranslation("de").subscribe(res => {
  this.choose["de"] = res['form-component']['choose-answer'];
  this.translate.use('en');
});

Monandrous

It's a nice idea you got here, I should warn people in my post but I already tried this, and it didn't worked. And it's not a clean code either I think, I would see if there is another way to get specific translations or another solution.. But thanks for your help buddy – Khalilahkhalin

Answer 3

Why don't you load each translation file at startup and keep a reference in a service? It is not ideal but if your translations files are relatively small and you don't have that many languages to deal with then it may be a good trade-off.

Strangely enough, I do call getTranslation from my code and it does not change language while translate.use obviously does.

Staysail

I could still read the .json file but the idea was to find a clean method to do this. I'm not currently working on this project anymore, but maybe it's something that has been fixed in an update ? I will have to check someday – Khalilahkhalin

Answer 4

I can recommend you to use Transloco for this case, it doesn't suffer from the described behavior and even easier to use for your case.

In Transloco getTranslation would be like:

const translation = this.translate.getTranslation("fr");
this.choose["fr"] = translation['form-component']['choose-answer'];

Maraca