As I strive to update the Ionic 3 Menu side dynamically when the user changes the language, a challenge arises for RTL languages where the menu needs to be on the right instead of the default left.
To tackle this issue, I have subscribed to the TranslateService event from @ngx-translate/core in my app.components.ts:
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
console.info(`Language changed to ${event.lang}`);
this.isRTL = event.lang == 'ar' || event.lang == 'fa';
if (event.lang == 'ar' || event.lang == 'fa') {
this.platform.setDir('rtl', true);
this.menuSide = 'right';
} else {
this.platform.setDir('ltr', true);
this.menuSide = 'left';
}
this.platform.setLang(event.lang, true);
});
The aforementioned code successfully executes upon language change, updating all variables as intended. Unit tests and console.logs ensure the correctness of these updates at runtime.
In the template:
<ion-menu [content]="content" [side]="isRTL?'right':'left'" side="{{menuSide}}">
....
</ion-menu>
Despite updates to this.menuSide within the controller, the behavior does not reflect expectations.
It appears that changing the side is only effective before platform.ready(). Once platform.ready() is completed, regardless of the setting, no changes take effect.
Edit:
I attempted the solution provided in , yet the issue persists.
Although displaying menuSide in the template reveals the correct value, it fails to impact the menu direction.
Manually altering the "side" attribute via browser element inspector results in successful direction change; however, utilizing the menuSide variable proves ineffective.
- For access to the source code, visit https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html