CODEWITHSUNDEEP
angulartypescriptionic2
George Huang
George Huang

Reputation: 2523

Ionic2 one sidemenu for each Tab open the same sidemenu

In my ionic2 app, I would like to have one sidemenu for each of my tab. Here was I tried. I used ionic start appname tabs --v2 to create the base structure.

Then, my idea was to make both home.html and contact.html (created by ionic cli) a sidemenu containing page. So I changed both home.html and contact.html in the pages folder as below:

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

  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openPage(p)">
        Page 1
      </button>
      <button menuClose ion-item (click)="openPage(p)">
        Page 2
      </button>
    </ion-list>
  </ion-content>

</ion-menu> 

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

I then changed both ts files (home.ts and contact.ts) to contain its own rootpage, as below:

rootPage: any = HomeRootPage; // for home.ts

and 

rootPage: any = ContactRootPage; // for contact.ts

in my HomeRootPage, I have the navbar like below:

<ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home Root</ion-title>
  </ion-navbar>

and my ContactRootPage:

<ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Contact Root</ion-title>
  </ion-navbar>

I then ran ionic serve. and yes, I built one sidemenu for each tab!! (home and contact).

I could toggle the sidemenu on my HomeRootPage, but the sidemenu for contact root page doesn't work! Instead of open the contact sidemenu, it opens the home sidemenu. (both menuToggle open the same sidemenu)

Do any of you know why that happened? Can I tell my menuToggle command to toggle its own sidemenu?

Thank you very much for your help in advance. :-)

Upvotes: 1

Views: 385

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Can I tell my menuToggle command to toggle its own sidemenu?

From Ionic Docs:

To toggle a specific menu by its id or side, give the menuToggle directive a value.

<button ion-button menuToggle="right">Toggle Right Menu</button>

So you can try by setting an id to each menu like this:

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

and

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

And then in your pages:

  <ion-navbar>
    <button ion-button menuToggle="home">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home Root</ion-title>
  </ion-navbar>

And 

  <ion-navbar>
    <button ion-button menuToggle="contact">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Contact Root</ion-title>
  </ion-navbar>

If that does not working properly, or if you see that when you swipe the wrong menu is being shown, you can also do it in the component code:

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

  ionViewDidEnter() {
    // Use the id to enable/disable the menus
    this.menuCtrl.enable(true, 'home');
    this.menuCtrl.enable(false, 'contact');
  }

Upvotes: 1

Related Questions