I am attempting to bind a TypeScript variable to the translate service in a similar way as binding in HTML markup, which is functioning correctly.
Here's what I have attempted so far:
ngOnInit() {
this.customTranslateService.get("mainLayout.userProfileDropdown.changeLocale").subscribe((result) => {
this.changeLocaleText = result;
})
this.customTranslateService.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.changeLocaleText = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale");
});
this.userProfileMenuOptions = [
{
text: this.changeLocaleText, itemId: "LocaleSelect"
},
{
text: "Report a bug", itemId: "BugReport"
},
{
text: "Request a feature", itemId: "FeatureRequest"
},
{
text: "Log Out", itemId: "LogOut"
}
];
}
customTranslateService is a service that wraps TranslateService.
The initial subscription is working properly, however, when switching languages, the onLangChange event triggers and changes the variable content correctly. But the reference to changeLocaleText in userProfileMenuOptions is not updated because it is not bound.
Using a BehaviorSubject may not be suitable here since this is TypeScript code, not HTML markup that can utilize the async pipe.
One potential solution could be recreating the userProfileMenuOptions array every time the language change subscription is called, although it may not be optimal for the component using the array.
PS: The use of instant works here due to an application loader loading all available languages before the user accesses the application.
Do you have any ideas on how to address this issue?