Directive not updated on language change

[danielwagner]

If the language is changed using i18n.changeLanguage after a component is rendered, the I18nDirective does not update the translations. Here is a full example:

import { Component } from '@angular/core';
import { I18nService, I18nServiceConfig, I18nDirective } from 'ng2-i18next/ng2-i18next';
require('expose?i18next!i18next');
const i18nextXHRBackend = require('expose?i18nextXHRBackend!i18next-xhr-backend');

@Component({
  selector: 'my-app',
  template: `<!-- works: --><p>{{i18n.t('HELLO_WORLD')}}</p>
<!-- does not work: --><p i18n="HELLO_WORLD"></p>`,
  directives: [I18nDirective],
  providers: [
    I18nService,
    {
      provide: I18nServiceConfig,
      useValue: {
        use: [i18nextXHRBackend],
        config: {
          debug: true,
          lng: 'de',
          fallbackLng: 'de'
        }
      }
    }
  ]
})
export class MyApp {
  private i18n: any;

  constructor(i18nService: I18nService) {
    this.i18n = i18nService.i18n;

    i18nService.i18n.on('languageChanged', (lng) => {
      console.log('myApp: languageChanged', lng);
    });

    i18nService.i18n.on('loaded', (lang) => {
      console.log('myApp: loaded', JSON.stringify(lang));
    });

    // simulate user-triggered language switch
    setTimeout(() => {
      this.i18n.changeLanguage('en', (err, t) => {
        console.log('myApp: updated', t('HELLO_WORLD')); // works
      });
    }, 500);
  }
}

After the language change, the template element using i18n.t() updates to display the English translation value while the element using the i18n attribute still shows the initial German value.

[WilliamOrange]

Hi,

I also tired to change language on the fly using the same code, and I am getting an error from the underlying i18next library instead.

Here is my error:

I recently downloaded this wrapper and have integrated into my project. The translations are working for me, but I cannot change the language.

I was wondering if this was a result of attempting to fix the bug?

Thanks, Bill

[goors]

same here ....