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 star

Answer 1

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)

Answer 2

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.