How to use AlertController result in ionViewCanLeave method?

Ionic Framework ionic-v3
1

This a very straightforward use case and I’m sure many Ionic developers would face it sooner or later but there is no sample or example about this.

Basically, I need to show an alert (using AlertController) to the user when taps on the Back button (or any other way to leave the current page) and ask for confirmation when there is unsaved data on the page.

I’m trying to use the result of AlertController’s buttons selection in ionViewCanLeave method but can’t make it work. Has anybody solved this problem already?

2

You don’t need ionViewCanLeave for this. Just handle the back button.

3

Updated with simpler, more self-contained answer that could very easily be moved into a service for reuse

Pretty straightforward, I’d think yes you’d want to use viewCanLeave here. It would be nice if the AlertController would resolve a promise with the button pressed when it was closed, that way you could treat it sort of like a regular confirm() dialog. Since it doesn’t, wrapped it in a function that does:

export class Tab1 {
  constructor(private navCtrl: NavController, private alertCtrl: AlertController) {}

  async ionViewCanLeave() {
    const shouldLeave = await this.confirmLeave();
    return shouldLeave;
  }
  
  confirmLeave(): Promise<Boolean> {
    let resolveLeaving;
    const canLeave = new Promise<Boolean>(resolve => resolveLeaving = resolve);
    const alert = this.alertCtrl.create({
      title: 'Confirm leave',
      message: 'Do you want to leave the page?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => resolveLeaving(false)
        },
        {
          text: 'Yes',
          handler: () => resolveLeaving(true)
        }
      ]
    });
    alert.present();
    return canLeave
  }
}
3 Likes
4

Thank you rlouie. Your solution works perfect. I just needed to change
const canLeave = new Promise(...
to
const canLeave = new Promise<Boolean>(...
to stop type check error.

As you said, I hope Ionic team make this change and have AlertController to resolve with the value passed by selected button.

1 Like
5

Yep, good call on that, since it didn’t match my defined return type. I’ll update the answer just for those who may search for this in the future.

1 Like
6

Thanks, is working and saved my day!

7

I didn’t know why rlouie solution wont work on me, but gotta share my solution.

    ionViewCanLeave(): Promise<boolean> {
        return new Promise(resolve => {
            if (!this.formGroup.dirty) return resolve(true);

            this._alertCtrl.create({
                title: 'Confirm leaving',
                message: 'There is unsave work, do you like to continue leaving?',
                buttons: [{
                    text: 'Leave',
                    handler: () => {
                        resolve(true);
                    }
                }, {
                    text: 'Stay',
                    handler: () => {
                        resolve(false);
                    }
                }]
            }).present();
        });
    }