GGaluba GGaluba - 1 month ago 7
TypeScript Question

Two Ionic2 menus: One is shown. The other is not

In my Ionic2 app I have two pages that each have very similar menus each. Those menus are named. However one page does show its menu and the other does not. The respective menu HTML code is inside the respective XXX.html. Is there something preventing Ionic2 from having two menus on the same side for different pages?

story.html works:

<ion-header>
<ion-navbar #storyNav>
<ion-title>Originaltöne</ion-title>
<button ion-button menuToggle="checkMenu" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>

<ion-content>
<!-- <ion-item (click)="putOnWatchlist(entry)" *ngFor="let entry of dataToShow">
{{ entry.textbody }}
</ion-item> -->
</ion-content>

<ion-menu id="checkMenu" side="right" [content]="storyNav">
<ion-content>
Lorem ipsum...
<ion-item menuClose="checkMenu" detail-none>Close Menu</ion-item>
</ion-content>
</ion-menu>


But story-dashboard.html does not:

<ion-header>
<ion-navbar #dashboardNav>
<ion-title>Originaltöne</ion-title>
<button ion-button menuToggle="favMenu" right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>

<ion-content>
<ion-item >
Lorem ipsum...
</ion-item>
</ion-content>

<ion-menu id="favMenu" side="right" [content]="dashboardNav">
<ion-content>
Lorem ipsum...
<ion-item menuClose="favMenu" detail-none>Close Menu</ion-item>
</ion-content>
</ion-menu>

Answer Source

This is a simple error, when you create a page automatically he will be displaying the app.html (is located in myapp/src/app/), so with that information when we work with menus, we use then inside the app.html and not inside the single page.

So.. You can create two differents menus inside the app.html, and call the one you want to open, you should using buttons with menuToggle likely <button ion-button menuToggle>Toggle Menu</button>, or to call a specify one call a function with the click.

 // id of the menu you want call
 openMenu(id) {
   this.menuCtrl.open(id);
 }

For more information, I recommend you seeing the docs about Menu and MenuController