Ionic 2: Generated back button click event

21
votes

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?

6
ionic2
You can't, Why not just add your own ? - LeRoy
@LeRoy exactly do you add your own? Sorry I'm new to ionic2 development.. - tpoker
What do you need to do in your page? Do you need to handle only the click on the back button, or the idea is to do something when the user leaves the page? - sebaferreras
@sebaferreras I need to record the user's action of hitting that back button.. - tpoker
And could something like ionViewDidLeave or ionViewWillLeave events help you achieving that? With those events you will be able to record when the user goes back from that page (by hitting that button or any other button that could make the user leave the page) - sebaferreras

6 Answers

62
votes

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();
    }
  }
}
13
votes

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;
}
7
votes

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.

1
votes

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();
  }

}
0
votes

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/

0
votes

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.