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

In case someone is still having a problem after using

@ViewChild(Navbar) navBar: Navbar;

try NOT to put the this.navbar.backButtonClick in the constructor()

Alternatively, you can place it at ionViewDidLoad() it should work.

Answer 2

If you want too do it manually:

Add this to your page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button (click)="goBack()" royal>
                <ion-icon name="arrow-round-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Details page</ion-title>
    </ion-toolbar>
</ion-header>

Add in your page.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/awesome/awesome.html',
})
export class AwesomePage {
  constructor(private navCtrl: NavController) {
  }
  goBack(){
    this.navCtrl.pop();
  }

}

Answer 3

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 4

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.

Answer 5

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 6

In case anyone is looking. Ionic 3 offers life-cycle events. Either "ionViewDidLeave" or "ionViewWillLeave" can be used for such purposes.

Check out docs to see more events. https://ionicframework.com/docs/api/navigation/NavController/