How to translate an object with ngx-translate in Angular without force its re render?

Question

In our Angular application, we have an internal library that has several components (like headers...) we use them dynamically in our Angular applications, we passing to them some properties (like simple string for title, or complex array and objects). My problem is that, I'm working on translating the application using ngx-translate, when I translate the properties that are passed to these components, the translation is fine but the view doesn't gets updated with the new language ! The language of the application is changed by the user in another component, I have a service method that get the selected language and I stored it in local storage.

I tried to force re-rendering the component (which is, yes, not that efficient!) with setTimeOut, in order to pass the new value and update the view. I'm aware of change detection, and I implemented it using detectChanges method, but it doesn't worked! the probmlem remains the same: the translation is fine but the view doesn't changed ! I tested the same array property in a simple paragraph element and it worked fine, it gets translated properly.

Answer 1

I'm not sure if this work for you but i'm gonna try

For example we're building lang selector

<button (click)="useLanguage('de')">de</button>
<button (click)="useLanguage('en')">en</button>
<button (click)="useLanguage('fr')">fr</button>

In your component

useLanguage(language: string): void {
    this.translate.use(language);
}