core: translate directive doesn't update the text when changing the language via use() function

Hello,

First of all, thanks for the wonderful library. It was very easy and straight forward to get it up and running.

The issue

Unfortunately, I do have an issue when I try to switch to another language. The translate directive doesn’t update the texts. Texts that are translated via the pipe do get updated.

In my AppComponent, I set the inital language to ‘nl’.

export class AppComponent {
    constructor(private translateService: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        translateService.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translateService.use('nl');
    }
}

In my view, there’s

<div [translate]="'member.firstname'">First Name</div>
<div>{{ 'member.firstname' | translate }}</div>

Somewhere in my application, I have a button to switch the language to english, which calls

this.translateService.use('en');

When I click the button, the pipe does its thing, but the directive does not.

Presumable cause

When checking translate.directive.ts, I noticed that the node.lastKey is always equal to key, and that’s why the translation does not occur.

updateValue(key: string, node: any, translations: any) {
        if(key) {
            let interpolateParams: Object = this.translateParams;
            if(node.lastKey === key && this.lastParams === interpolateParams) {
                return;
            }

When I comment it out (the check “if (node.lastKey …”), the translation does occur and it works fine. The if statement is probably there for a reason, but I guess that the fact the language changed should be added to the check as well.

I use version of g2-translate, and version 2.3.1 of angular.

Could you please have a look at this?

Thanks, Jeroen.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 27

Most upvoted comments

As everyone I have a same issue where the translations are getting updated with translate pipe but not with other methods like .instant() or .get(); The only work around seems to be working is below

this.prop = translateService.instant('MY_TRANSLATE_KEY');
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
     // do something
     this.prop = event.translations['MY_TRANSLATE_KEY']; // setting this again 
});

Is this solved or can anyone suggest better workaround here?

sanket-work on May 28, 2019

I have a similar issue with:

Ionic 3
Angular 5.03
ngx-translate 8.00

I have a template like you suggest:

<h2 [translate]="'WELCOME_HELLO_TEXT'">test</h2>

and I have 4 languages (en.json, fr.json, es.json and ga.json)

I save the current language in Storage and load it when the app starts with the initTranslate()function on my app.components.ts
When I change the language, I save the new language to Storage and try to load the new language with translate.use('fr')
The new language works if I reload the page (F5)

When I debug the app on the browser I found the next problem:

If my current language is English (en) and I change to another one (fr, es or ga) the translation isn’t updated on the template until I reload the page (F5). (The template show the untranslated text like WELCOME_HELLO_TEXT)
If my current language is Français, Galego or Español I can change to English and the template gets updated accordingly but I cannot change these combinations:
- fr -> es, ga
- es -> fr, ga
- ga -> fr, es

For the last 3 combinations I need to reload the page with F5 because when I change language I see the raw text like WELCOME_HELLO_TEXT

Any clue what I’m doing wrong ? The thing I cannot understand is why changing to English always works but changing to another language doesn’t, and If I reload the page all languages works.

This is my initTranslate() on my app.components.ts:

  initTranslate() {
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang('en');
    const browserLang = this.translate.getBrowserLang();

    if (this.currentLanguage){
      this.translate.use(this.currentLanguage);
    }else if (browserLang) {
      if (browserLang === 'zh') {
        const browserCultureLang = this.translate.getBrowserCultureLang();

        if (browserCultureLang.match(/-CN|CHS|Hans/i)) {
          this.translate.use('zh-cmn-Hans');
        } else if (browserCultureLang.match(/-TW|CHT|Hant/i)) {
          this.translate.use('zh-cmn-Hant');
        }
      } else {
        this.translate.use(this.translate.getBrowserLang());
      }
    } else {
      this.translate.use('en'); // Set your language here
    }

    this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
      this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
    });
  }

and this is how I init ngx-translate on my app.module.ts:

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
 ....

AlvaroAV on Jan 13, 2018

Thank you very much for taking the time to post that link! It contains very nice workarounds that solved my problem!

fedme on Apr 16, 2018

@raimaj that how i fixed https://github.com/ngx-translate/core/issues/829 https://stackoverflow.com/a/44698964/2387051

FahmiChaar on Apr 16, 2018

yes, it’s a bug, it will be fixed in the next beta (currently fixed on master) the directive doesn’t work with empty text content right now, if you cannot wait for the next release, just put anything into the content like <h2 [translate]="'HOME.TITLE'">test</h2>

ocombe on Feb 16, 2017

Hi, I think I have a change like that coming up in the next version that I haven’t pushed yet, I’ll check when I get back home.

ocombe on Jan 5, 2017