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

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:

  
    Menu 1
  
  
    
      
        Close Menu 1
      
    
  



  
    Menu 2
  
  
    
      
        Close Menu 2
      
    
  

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.