Ionic - Handling NavBar back button?

2
votes

All the solutions for handling going back via the hardware button in Ionic have all worked using this: 

 platform.ready().then(() => {
  platform.registerBackButtonAction(() => {

However, I was wondering if there is a way to handle the back button that appears in the Navbar as this doesn't seem to be fired when I press that in Android. All solutions I've tried to find refer to the code at the top that only appears to work for hardware buttons only.

2
typescriptionic-framework

2 Answers

7
votes

I have achieved it in ionic-3 with this code.

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

There is one backButtonClick() function present in the ionic navbar, you can override it like something below to get the navbar back button click event

backButtonClick() {
 console.log('// dos omething')
}

ionViewDidEnter() {
 this.navBar.backButtonClick = this.backButtonClick;
}