johnnyfittizio johnnyfittizio - 7 days ago 5
TypeScript Question

Ionic 2 - Multiple menu at the same time (right - left)

THE SITUATION:

I have a working right menu in my Ionic 2 app. I need to add a left menu.
I have tried but was unsuccessfull so far.
This is my attempt:

THE CODE:

With this code the right menu is properly working, but it doesn't appear the left menu.

app.html:

<ion-menu [content]="content" id="menu1">

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

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

</ion-menu>


<ion-menu [content]="content" id="menu2">

<ion-header>
<ion-toolbar color="danger">
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


app.component.ts:

constructor(
public platform: Platform,
public menu: MenuController
) {
this.initializeApp();

this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'Login', component: LoginPage },
];

this.menu.enable(true, 'menu1');
this.menu.enable(true, 'menu2');
}


THE QUESTION:

How can I have two menu - left and right - properly working at the same time?

Answer

Just like you can see here, you need to add side="left" and side="right" like this:

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu>

And

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu>

EDIT:

Just in case if there is something we're missing, I've created this working plunker.

So basically we just need to add both menus (for instance, in the app.html page) like this:

<ion-menu [content]="content" side="left" id="menu1">

  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">

  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item  menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

</ion-menu>



<ion-nav [root]="rootPage" #content></ion-nav>

Then we need to add both menu buttons in the header like this:

<ion-header>
  <ion-navbar primary>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Home page</p>

</ion-content>

Please notice that each button has the menuToggle="left" or menuToggle="right" property to be able to toggle the proper menu.

And last but not least, in the component code, we use the ionViewDidEnter method to enable both menus, just to be sure that the html elements do exists by that time (instead of doing that in the constructor)

@Component({
  templateUrl:"..."
})
export class HomePage {

  constructor(private menu: MenuController, private nav: NavController) { }

  ionViewDidEnter() {
    this.menu.enable(true, 'menu1');
    this.menu.enable(true, 'menu2');
  }

}
Comments