How to show a confirmation message before leaving a Tab in Ionic 3

Question

My ionic 3 application has an ion-tabs with two Tabs. When switching from tab to tab, I need to show a confirmation message ( using AlertController ) to prevent the user from changing the current tab unless he confirms his choice. Is this possible in Ionic ? I've tried showing a confirmation message when tab has been changing. However, I couldn't prevent the new tab from showing up.

Thank you.

Answer 1

You can realize such things using Nav guards. You can find them in the ionic-docs for the NavController.

The implementation may look something like this:

ionViewCanEnter(): Promise<any> {
  return new Promise((resolve, reject) => {
    let alert = this.alertCtrl.create({
      title: 'Alert',
      message: 'Please confirm ...',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            reject();
          },
        },
        {
          text: 'Confirm',
          handler: () => {
            resolve();
          },
        },
      ],
    });
    alert.present();
  });
}

Use ionViewCanEnter() as ionViewCanLeave() does currently not work (at least when working with tabs).