App.html dynamic direction

Hey guys am developing a multi dir application i have an issue to change side menu direction without refreshing app:

this is my app.html:

<ion-menu [content]="content" type="overlay" [attr.side]="dir==='ltr'?'left':'right'">
            <button ion-item>
            <button ion-item>
            <button ion-item>
            <button ion-item>
                Close Menu
<ion-nav [root]="rootPage" #content></ion-nav>

and this is my app.components.ts

dir: string;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService, storage: Storage, multi: MultilangProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      storage.get('dir').then((val) => {
        multi.currentDirection();//i call this provider method to get dir //equivalent to platform.get..
          this.dir = multi.currentdir; //dir (rtl or ltr)

it works but i have to refresh app to load new direction from storage. i’ve tried to access platform.dir() from html but it give undefined. Help please.

*i dont want to use two side menus for each language i want to reuse the same.

if someone encountred that in future here is my solution:

if(lang === 'ar') {
      this.platform.setDir("rtl", true);
      document.getElementById('test').setAttribute('side', 'right');
      dir = "rtl";
    if(lang === 'en') {
      this.platform.setDir("ltr", true);
      document.getElementById('test').setAttribute('side', 'left');
      dir = "ltr";