21

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?

Phonolog
  • 6,321
  • 3
  • 36
  • 64
tpoker
  • 492
  • 1
  • 5
  • 15
  • You can't, Why not just add your own ? – LeRoy Aug 12 '16 at 08:14
  • @LeRoy exactly do you add your own? Sorry I'm new to ionic2 development.. – tpoker Aug 12 '16 at 17:14
  • 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 Aug 15 '16 at 18:19
  • @sebaferreras I need to record the user's action of hitting that back button.. – tpoker Aug 17 '16 at 20:31
  • 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 Aug 17 '16 at 20:42
  • For **Ionic 4** https://stackoverflow.com/questions/51828017/navcontroller-doesnt-work-in-ionic-4/51970357#51970357 – Cesar Devesa Aug 23 '18 at 23:25

6 Answers6

62

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();
    }
  }
}
Phonolog
  • 6,321
  • 3
  • 36
  • 64
AnatolyS
  • 4,249
  • 18
  • 28
  • i am getting this error after adding the above code: Uncaught (in promise): TypeError: Cannot set property 'backButtonClick' of undefined TypeError: Cannot set property 'backButtonClick' of undefined at file... – Biranchi May 23 '17 at 09:40
  • @Biranchi it means that navBar has been not found. double check your template page – AnatolyS May 23 '17 at 11:45
  • same problem here – Dani Feb 17 '18 at 18:34
  • 1
    This is like doing on every page. But can we do something commonly, like write once applied everywhere?? – Ankur Shah Jun 12 '18 at 10:20
  • @AnkurShah You could create a custom navbar component with this code and use it everywhere in your app... – Phonolog Aug 10 '18 at 17:14
  • @Biranchi I initially tried this in the constructor and it's clear that it gave the error because the template page wasn't ready. You will have to add this in the `ionViewDidLoad()` to have the `navBar` after the template loaded. This applies only if you were trying out in the constructor and of course `` has to be there in our template for this to work. – nice_dev Apr 15 '19 at 11:18
13

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;
}
FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178
7

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.

Ariel Antonio Fundora
  • 1,330
  • 15
  • 20
1

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

}
LeRoy
  • 4,189
  • 2
  • 35
  • 46
0

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/

Junaid
  • 4,682
  • 1
  • 34
  • 40
0

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.

lowzhao
  • 366
  • 2
  • 8