I'm working on my project and basically want to implement multilang webapp. I'm using ngx-translate
for that. Now I've faced an issue when trying to implement cookie bar using ngx-cookie-consent
.
I've got 2 languages: en|ru
and when I'm clicking the button to change the language - the whole app is translated except the cookiebar. Maybe you've faced such an issue, please give some hints how you managed it.
Any help is appreciated.
Here is the code how I'm loading the translation message into cookie-consent:
this.translateService
.get(['FOOTER.COOKIES'])
.subscribe(data => {
console.log(data)
this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;
// Override default messages with the translated ones
this.ccService.getConfig().content.message = data['FOOTER.COOKIES'];
this.ccService.destroy();//remove previous cookie bar (with default messages)
this.ccService.init(this.ccService.getConfig()); // update config with translated messages
});
}
Instead of only configuring the cookie consent once when you first load the application (at least that's what seems is happening in your code), you can subscribe when the language changes and configure it every time that happens:
export class MyComponent implements OnInit {
ngOnInit() {
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.configureCookieConsent();
});
this.configureCookieConsent();
}
configureCookieConsent() {
this.translateService
.get(['FOOTER.COOKIES'])
.subscribe(data => {
console.log(data)
this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;
// Override default messages with the translated ones
this.ccService.getConfig().content.message = data['FOOTER.COOKIES'];
this.ccService.destroy();//remove previous cookie bar (with default messages)
this.ccService.init(this.ccService.getConfig()); // update config with translated messages
});
}
}
}
I used a component as an example, but of course it should go wherever you currently configure your cookie consent