question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:26

github_iconTop GitHub Comments

4reactions
sanket-workcommented, May 28, 2019

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?

3reactions
AlvaroAVcommented, Jan 13, 2018

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()
  ],
 ....



Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular translation not updating placeholder of Chosen plugin ...
I'm using the data-placeholder attribute to render a value which is filtered through the angular-translate plugin. Initially I was having issues with all...
Read more >
How to translate your Angular app with ngx-translate
1. Add ngx-translate to your Angular application 2. Set up the TranslateService in your app.module.ts 3. Create your main language translation file (in...
Read more >
How To Use ngx-translate with Angular - DigitalOcean
Learn how to use the ngx-translate library to internationalize (i18n) ... {lang} is the language of the file you are using for translations....
Read more >
Attribute directives - Angular
Change the appearance or behavior of DOM elements and Angular components with attribute directives. See the live example / download example for a...
Read more >
Angular I18n: How to Internationalize with ngx-translate | Phrase
Learn all about Angular i18n with ngx-translate to change the language of ... You can either use a service, directive, or pipe to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found