ionic 3 different side menu per tab selected - ionic-framework

Question

I would like to have a different side menu when selecting tabs from below. I mean I want my side menus to change when I select a tab.
Can I do this?
Thanks
Phil

Answer 1

One way is to apply (on each item in your menu) a conditional class:
.hidden {
display: none;
}
as an example app.html:
<ion-menu [content]="content">
<!-- The side menu title -->
<ion-header>
<ion-navbar>
<ion-title>{{loc.translate.MENU}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<!-- Show toggle only when first tab -->
<ion-item [class.hidden]="currentTab == firstTab" >
<ion-toggle (ionChange)="toggled()" ></ion-toggle>
<ion-label>Switch Wifi</ion-label>
</ion-item>
<!-- Show only when first tab -->
<button [class.hidden]="currentTab == firstTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 1 says hello
</button>
<!-- Show only when second tab -->
<button [class.hidden]="currentTab == secondTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 2 says hello
</button>
<!-- Show only when third tab -->
<button [class.hidden]="currentTab == thirdTab" ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>tab 3 item here
</button>
<!-- Show always -->
<button ion-item menuToggle>
<ion-icon item-start name="close"></ion-icon>CLose Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
and on your app.component.ts youll make your way to getting the current Page (or tab) and have your properties firstTab, secondTab and such be defined as the pages so that you can have it compared with the current page.