Ionic 2: Generated back button click event

Question

I'm trying to log the user's action of clicking the generated back button in the navigation bar, but I can't find a way to handle the click event?

It seems like the ion-nav-back-button from here isn't working anymore?

Answer 1

According to the official Ionic docs, you can override the backButtonClick() method of the NavBar component:

import { ViewChild } from '@angular/core';
import { Navbar } from 'ionic-angular';

@Component({
  selector: 'my-page',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>
          MyPage
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
    ...
    </ion-content>
   `
})
export class MyPage {
  @ViewChild(Navbar) navBar: Navbar;
  constructor(private navController: NavController){}
  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
     // todo something
     this.navController.pop();
    }
  }
}

Answer 2

You need first to add hideBackButton to the ion-navbar. It will remove the default back button.

Then you add your own button that you can easily manage with a click event.

THE CODE:

<ion-header>
 <ion-navbar hideBackButton>
    <ion-buttons left>
        <button ion-button (click)="doYourStuff()">
            <ion-icon class="customIcon" name="arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
 </ion-navbar>
</ion-header>

doYourStuff()
{
    alert('cowabonga');
    this.navCtrl.pop();  // remember to put this to add the back button behavior
}

Final thing: Css.

The icon will be smaller than the usual back button. If you want to make it similar to the default one used in Ionic2 you need to increase its size.

.customIcon {

    font-size: 1.7em;
}

Answer 3

For customize default back button action you need override the backButtonClick() method of the NavBar component.

In your "customClass.ts" import Navbar component. Create auxMethod for override the default behavior and called in your ionViewDidLoad method.

import { Navbar } from 'ionic-angular';

   export class myCustomClass {

   @ViewChild(Navbar) navBar: Navbar;

   ...

   ionViewDidLoad() {
       this.setBackButtonAction()
   }

   //Method to override the default back button action
   setBackButtonAction(){
     this.navBar.backButtonClick = () => {
     //Write here wherever you wanna do
      this.navCtrl.pop()
     }
   }
}

This code has been tested in ionic 3.