Changing Menu side dynamically

Ionic Framework ionic-v3
1

Hello,

I’m trying to change the Menu side dynamically on once user changes the language.
For RTL languages menu needs to be on the right, by default the it’s set on left.

I subscribe to a event when the language changes:

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  if (event.lang == 'ar' || event.lang == 'fa') {
    this.platform.setDir('ltr', false);
    this.platform.setDir('rtl', true);
    this.menuSide = "right";
  } else {
    this.platform.setDir('rtl', false);
    this.platform.setDir('ltr', true);
    this.menuSide = "left";
  }
});

In the template:

<ion-menu [content]="content" side="{{ menuSide }}" >
...

However, even though the this.menuSide changes in the controller, it won’t work as expected.

I’ve tried using MenuController as well, that didn’t work too:

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      if (event.lang == 'ar' || event.lang == 'fa') {
        this.platform.setDir('ltr', false);
        this.platform.setDir('rtl', true);
    
        let menu: Menu = this.menuCtrl.getMenus()[0];
        this.menuCtrl._unregister(menu);
        menu.side = 'right';
        this.menuCtrl._register(menu);
      } else {
        this.platform.setDir('rtl', false);
        this.platform.setDir('ltr', true);
      }
    });

Any idea how I should get this to work ?

2

It seems the side can be changed only before platform.ready(), once the platform.ready() is done, no matter what I set it won’t take any effects.

3

I was able to change the side of the ion-menu via HTMLElement directly.
I know this is not recommend and it should be handled the way I was trying to make it work in the original question, but that’s all I could come up with after trying so many different ways.

I believe the problem I have with ion-menu and its behavior on changing the side is a bug.

Here’s what I’ve changed to get it working.

app.component.ts

export class MyApp {
  #...
  menuSide: string = "left";

  this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      console.info(`Language change to ${event.lang}`);
      let element: HTMLElement = document.getElementById("lovelyMenu");

      if (event.lang == 'ar' || event.lang == 'fa') {
        this.platform.setDir('rtl', true);
        this.menuSide = 'right';
      } else {
        this.platform.setDir('ltr', true);
        this.menuSide = 'left';
      }

      element.setAttribute("side", this.menuSide);
      this.platform.setLang(event.lang, true);
    });
  }
  ...
}

app.html:

<ion-menu [content]="content" [side]="menuSide" id="lovelyMenu">
....

The commit on Github repo is at https://github.com/SavandBros/gonevis-mobile/commit/684e4ba4365594b7a7c10216267a16790538d158#diff-b8a3172f7ead0a5e519574ca3d3fa46d

4

it giving very bad experience.