ionOpen to update menu items before side menu opens?

Ionic Framework ionic-v3
1

I have a component that stores global variables.
In this case, it stores the language setting.
When a side menu is opened, I wanted it to update and reload the menu items in the language selected by user.

  1. On the top right corner, user click and select the language, and it will update the global variable. This works and the current page also updates it’s language setting without a problem. This is done in the page home.ts.

  2. When the menu button is clicked, <ion-menu [content]="content" (ionOpen)="menuOpened()">, the side menu opens and the console log also showed that the variable (language chosen by user) is changed.
    and then a updateMenu() to update the DOM to load the language selected.
    This is done in the page app.component.ts:

    menuOpened(){
        this.updateMenu();
      console.log("open menu Lang: ", this.globalVar.lingu);
    }
    //upDate Menu
    updateMenu(){
        this.lingu = this.globalVar.lingu;
        this.pages = [
            { title: {en:'Index',zh:'13篇目錄',ja:'全十三章目次'}, component: HomePage },
            { title: {en:'Index',zh:'Index',ja:'Index'}, component: ListPage }
        ];
    }

and in the app.html:

<ion-menu [content]="content"  (ionOpen)="menuOpened()">

  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
     <button>{{lingu}}</button>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title[lingu]}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

However as you see, the DOM hasn’t update the content.
I have to close and reopen the side menu to hv it show the correct language setting.

image

2

Is there a reason you’re avoiding ngx-translate?