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.

Answer 2

Just adding this as part of info given by @sebaferreras for the sake of @user623396

To have the side menu in the actual view, I had the following...

    <ion-menu [content]="thecontent" id='menu1'>
      <ion-toolbar>
        <ion-title>Title</ion-title>
      </ion-toolbar>

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

    <ion-navbar *navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Getting Started</ion-title>
    </ion-navbar>

    <ion-content #thecontent>
      <div>Some text</div>  
    </ion-content>

And then in the component file

    import {Component} from '@angular/core';
    import {MenuController, NavController} from 'ionic-angular';

    // Use the pipe TranslatePipe to use in the markup
    @Component({
      templateUrl: 'build/pages/sidemenu-page/sidemenu-page.html'
    })
    export class SideMenuPage {
      public rootPage = SideMenuPage;

      public myVal: string;  

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

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

Hopefully this is still correct for the latest version of Ionic (it's been a while since I have looked at this example)