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

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:

And here’s the code I tried to use:

  <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>

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.

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

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-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>

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


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

ionSelect: EventEmitter<Tab>;

So that is the one


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

even i need solution for this

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){