How to menuToggle with ion-tab?


#1

I have searched on here and can’t find a working example of how to toggle a menu from a click on a tab icon.

I have this below but it selects the tab and then will not fire again when selected.
The click event does not work either.
I do not want to navigate to another page when this tab is clicked, simply show the menu.

<ion-tabs id="tabsController-tabs1" selectedIndex="2">
  <ion-tab [root]="tab1Root" (ionSelect)='onMenuToggle()' tabTitle="Menu" tabIcon="menu" id="tabsController-tab5"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Featured" tabIcon="star-outline" id="tabsController-tab1"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Favourites" tabIcon="heart-outline" id="tabsController-tab4"></ion-tab>
</ion-tabs>

 onMenuToggle() {
    console.log('toggle');
    this.menuCtrl.toggle();
  }

#2

@ wekas
You create one page like etc name then in your home.ts page push through a command through a proper function this function home.html like (click)=“SignUp()” then in home.ts file SignUp() {
this.navCtrl.push(Pagename);
} You want to push into which page
Try it be like this.


#3

@ wekas
Even you cant understand my reasoning then upload snap shot i will recover this type of problem.


#4

I think i follow your logic. You are saying to call the function to toggle the menu from the page the tab opens.
The problem is I don’t want the tab to open a page I just want it function like a normal menu toggle.
e.g. Behave the same as this.
All I want is this button to be on the left of the tab at the bottom rather than in the header. So I don’t have to have a tab and a header.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Page title
    </ion-title> 
  </ion-navbar>
</ion-header>