title: Changing Ionic Menu side dynamically
body: <p>I'm trying to change the Ionic 3 Menu side dynamically once user changes the language.
  For RTL languages menu needs to be on the right, by default it's set on left.</p>
  
  <p>I subscribe to <code>TranslateService</code> from <code>@ngx-translate/core</code> event when the language changes <code>app.components.ts</code>:</p>
  
  <pre><code>this.translate.onLangChange.subscribe((event: LangChangeEvent) =&gt; {
    console.info(`Language change 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);
  });
  </code></pre>
  
  <p>The code above gets executed successfully when I the language gets changes and all the variables get set as expected (I've written unit tests to be sure and tons of console.logs while the app is running.)</p>
  
  <p>In the template:</p>
  
  <pre><code>&lt;ion-menu [content]="content" [side]="isRTL?'right':'left'" side="{{menuSide}}"&gt;
  ....
  &lt;/ion-menu&gt;
  </code></pre>
  
  <p>However, even though the <code>this.menuSide</code> changes in the controller, it won't work as expected.</p>
  
  <p>It seems the side can be changed only before <code>platform.ready()</code>, once the <code>platform.ready()</code> is done, no matter what I set it won’t take any effects.</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>I've tried to use the method in <a href="https://stackoverflow.com/a/46417869/636136">https://stackoverflow.com/a/46417869/636136</a> but that didn't fix it too. </p>
  
  <p>If I just print <code>menuSide</code> in the template it would have the correct value on the screen, but doesn't have any effect on the menu direction.</p>
  
  <p>I can change the "side" attribute on the menu element manually via browser element inspector and it will change the direction successfully, however using <code>menuSide</code> variable won't do the job.</p>
  
  <ul>
  <li>Source code available at <a href="https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html" rel="nofollow noreferrer">https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html</a></li>
  </ul>