App.html dynamic direction

Ionic Framework ionic-v3
1

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'">
    <ion-header>
        <ion-toolbar>
        <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item>
                Home
            </button>
            <button ion-item>
                Friends
            </button>
            <button ion-item>
                Events
            </button>
            <button ion-item>
                Close Menu
            </button>
        </ion-list>
    </ion-content>
</ion-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.
      statusBar.styleDefault();
      splashScreen.hide();
      storage.get('dir').then((val) => {
        multi.currentDirection();//i call this provider method to get dir //equivalent to platform.get..
        setTimeout(()=>{
          this.dir = multi.currentdir; //dir (rtl or ltr)
        },100)
      });
      
    });
  }

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.

2

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";
    }