Ionic2 capture back button event menuToggle

Hi All,

I have a menuToggle.

html

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

This works perfectly. It has an arrow (back) button when there is history in the stack as expected.

I would like to in the ts file capture the button click event when the user clicks this back button.

Any ideas please?

If I do the following, i.e. add: (click)="menuToggle()"

<ion-header>
  <ion-navbar whatsapp>
    <button menuToggle (click)="menuToggle()">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Chats</ion-title>
  </ion-navbar>
</ion-header>

the menuToggle function is only fired at the root. i.e. When it has 3 little lines, and not for the back button (arrow).

hi @richardmarais,

Ionic 2 will automatically put the left (arrow back) button in navbar if we will not specify the any button in ion-navbar, you may be confused in the main app menuToggle. if you wrote in your component like these

 <ion-navbar whatsapp>
    <button menuToggle (click)="menuToggle()">
        <ion-icon name="menu"></ion-icon>
   </button>
    <ion-title>Chats</ion-title>
 </ion-navbar>

now it will always appears with menu (3 little line) menu button, not replaced by arrow back button regardless of whether there is nav history exist or not.

 <ion-navbar whatsapp>
    <ion-title>Chats</ion-title>
 </ion-navbar>

here ionic 2 puts default arrow back button when the page(component) is appear via nav.push()

1 Like