Ionic2: How to use an different ion-menu in each child view

Question

I am trying to learn the use of the Ionic2 side menus and wish to see if I can have a separate side menu in each child view.

I have installed one of the getting started apps, which has a ion-menu in the main application, ie in the bootstrap app.html file we have

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

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

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

</ion-menu>

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

I have then added my own page, and in the initial root page getting-started.ts of the sample app I add the the following to navigate to my new page..

public goToSideMenuPage(): void{    
   this._navController.push(SideMenuPage);

I also add a button to call the above handler.

In the SideMenuPage, I would like it to have it's own completely different side menu. I have tried the following...

<ion-menu [content]="thecontent">
<ion-toolbar>
  <ion-title>Menu title</ion-title>
</ion-toolbar>

<ion-content>
 <ion-list>
    <button>button1</button>
    <button>button2</button>
 </ion-list>
 </ion-content>
</ion-menu>

<ion-content #thecontent>
  <div>Main contents text</div>
 </ion-content>

However, when I goto my page, all I see is Main contents text in the upper left corner. I don't see the menu hamburger icon, and if I drag to the right, I see the app main menu as set in app.html, and not my own "local" menu with contents of

<button>button1</button>
<button>button2</button>

In doco found here, the demo does show the side menu being swapped at runtime, but I cannot see the actual code for it anywhere. This is close to what I want to do (though I want it to swap when depending on what child page I navigate to), so it does look like it might be possible to do, but I just don't quite see how I should be doing it.

Does anyone know if this is possible, and if so, how to do it?

Answer 1

The information you're looking for is in the MenuController section from Ionic2 docs. That could be done by adding the menus in the app.html but assigning them an id 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>

And then, in each page we can decide which menu should be activated like this:

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

  ionViewDidEnter() {
    // Use the id to enable/disable the menus
    this.menu.enable(true, 'menu1');
    this.menu.enable(false, 'menu2');
  }

Also, please notice that I show the second page by using this.nav.setRoot(Page1); instead of using something like this.nav.push(Page1);.

---

EDIT: If you want both menus active at the same time, please take a look at this answer.

---

EDIT 2: Just like @peterc say in the comments:

I found this also worked if I had my side menu in my page sidemenu-page.html and set this.menu.enable(true, 'menu1'); in it's component (so there is the option to have the side menu with the markup of the page that will switch to it).

I add that to the answer because the view where it's going to be used seems to be a better place to put the menus instead of the app.html.