ionic2back-buttonback-button-control

How to handle back button on Ionic 2


How can I handle the back button action on Ionic 2?

I want to be able to know what to do depending on which page is being shown to the user.

I didn't find a good answer to this question, but after a while I figured it out myself a way to do it. I'm gonna share with you all.

Thanks


Solution

  • Here's how I did it:

    In every Page component, I created a function called backButtonAction(), which will execute custom code for every page.

    Code:

    import { Component } from '@angular/core';
    import { Platform, NavController, ModalController } from 'ionic-angular';
    import { DetailsModal } from './details';
    
    @Component({
        selector: 'page-appointments',
        templateUrl: 'appointments.html'
    })
    export class AppointmentsPage {
        modal: any;
    
        constructor(private modalCtrl: ModalController, public navCtrl: NavController, public platform: Platform) {
            // initialize your page here
        }
    
        backButtonAction(){
            /* checks if modal is open */
            if(this.modal && this.modal.index === 0) {
                /* closes modal */
                this.modal.dismiss();
            } else {
                /* exits the app, since this is the main/first tab */
                this.platform.exitApp();
                // this.navCtrl.setRoot(AnotherPage);  <-- if you wanted to go to another page
            }
        }
    
        openDetails(appointment){
            this.modal = this.modalCtrl.create(DetailsModal, {appointment: appointment});
            this.modal.present();
        }
    }
    

    And in the app.component.ts, I used the platform.registerBackButtonAction method to register a callback that will be called everytime the back button is clicked. Inside it I check if the function backButtonAction exists in the current page and call it, if it doesn't exists, just go to the main/first tab.

    One could simplify this if they didn't need to perform customized actions for every page. You could just pop or exit the app.

    I did it this way because I needed to check if the modal was open on this particular page.

    Code:

      platform.registerBackButtonAction(() => {
        let nav = app.getActiveNav();
        let activeView: ViewController = nav.getActive();
    
        if(activeView != null){
          if(nav.canGoBack()) {
            nav.pop();
          }else if (typeof activeView.instance.backButtonAction === 'function')
            activeView.instance.backButtonAction();
          else nav.parent.select(0); // goes to the first tab
        }
      });
    

    if the current page is the first tab, the app closes (as defined in the backButtonAction method).