CODEWITHSUNDEEP
htmlangulartypescriptionic4
eifersucht
eifersucht

Reputation: 691

Multiple side menus in Ionic 4 tab based app

I've created a tabs based app with the command.

ionic start myApp tabs

The idea is to add different side menus for each tab pages, trying to do a master detail navigation, using the side menu as master elements list and the tab pages to show detailed content.

The app.component.html file looks like this:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

tab1.page.html like code:

<ion-menu contentId="aside1" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>

tab2.page.html code:

<ion-menu contentId="aside2" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>

Both menus aside1 and aside2 works when I swipe and show the individual strings array elements at the first look of tabs. The problem is when I go back to previous tab, instead of show again aside1 side menu, this stop working and what the swipe gesture really does is show the side menu of the other tab.

I don't know if I need a particular code in tab1.page.ts and tab2.page.ts to make this work.

Upvotes: 3

Views: 1480

Answers (1)

eifersucht
eifersucht

Reputation: 691

The problem was that I haven't specify the menuId in each side menu. For example:

<ion-menu contentId="main-content" menuId="main"> ... </ion-menu>

<ion-menu menuId="bar-menu"> ... </ion-menu>

I do not delete the question in case someone finds it interesting to create different menus for each page

Upvotes: 2

Related Questions