Is it possible to trigger menuToggle with an <ion-tab>?

Ionic Framework ionic-v3
1

I’m trying to use a tab button to trigger the opening of my side nav. Here’s the UI that I’m attempting to create:

12
Screen Shot 2018-03-12 at 20.55.12.png762×1342 11.5 KB

And here’s the code I tried to use:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="One" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Two" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Three" tabIcon="information-circle"></ion-tab>
  <ion-tab tabTitle="More" tabIcon="menu" menuToggle></ion-tab>
</ion-tabs>

I’ve looked around and can’t find any examples of this elsewhere so I’m wondering if this combination is possible and if so how?

Thank you for any help.

2

I would try adding a (click) handler to the ion-tab which uses the menu controller to open/close the menu

3

Thanks for the idea. Unfortunately that doesn’t appear to work either. The toggle works fine if I add a (click) handler to a regular button along side my tabs but not when I add it to a tab itself for example:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Test"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Test"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Test"></ion-tab>
  <ion-tab tabTitle="More" tabIcon="menu" (click)='toggleMenu();'></ion-tab>
</ion-tabs>
4

Found the solution as per this page, to use (ionSelect) on the element in order to trigger the required controller action.

5

Hi

yes. that is it… I was just going through the sourcecode of ion-tab

ionSelect: EventEmitter<Tab>;

So that is the one

Tom

6

And mentioned in the ion-tab docs, btw, as output event

7

even i need solution for this

8

Finally I got Answer Guys

< ion-tabs>
<ion-tab [root]=“tab1Root” tabTitle=“Test”>
<ion-tab [root]=“tab2Root” tabTitle=“Test”>
<ion-tab [root]=“tab3Root” tabTitle=“Test”>
<ion-tab tabTitle=“More” tabIcon=“menu” (ionSelect)='toggleMenu();>
< /ion-tabs>

import { MenuController } from ‘ionic-angular’;

constructor(public menuCtrl : MenuController){

}

toggleMenu(){
this.menuCtrl.toggle();
}