CODEWITHSUNDEEP
ionic2
rpayanm
rpayanm

Reputation: 6553

Show a confirmation alert before app close ionic 2

I make one application with ionic 2. I am trying to get a confirmation alert before close the application.

How can I do it ?

Upvotes: 2

Views: 11501

Answers (3)

Debojyoti
Debojyoti

Reputation: 4841

Ionic 2+ quick solution: In your app.component.ts try

ngOnInit() {
    this.platform.registerBackButtonAction(() => {
      if (this.nav.canGoBack()) {
        this.nav.pop();
      } else {
        // Currently on root page
        this.appClosePromt();
      }
    }, 1);
  }

  appClosePromt() {
    let alert = this.alertCtrl.create({
      title: '',
      message: 'Do you want to exit?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Dismiss
          }
        },
        {
          text: 'Exit',
          handler: () => {
            this.platform.exitApp();
          }
        }
      ]
    });
    alert.present();  
  }

Upvotes: 1

rpayanm
rpayanm

Reputation: 6553

I could find by myself the right solution:

https://forum.ionicframework.com/t/show-a-confirmation-alert-before-app-close-ionic/63313

showedAlert: boolean;

constructor(..., public alertCtrl: AlertController) {
}

initializeApp() {
    this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
        Splashscreen.hide();
        this.showedAlert = false;

        // Confirm exit
        this.platform.registerBackButtonAction(() => {
            if (this.nav.length() == 1) {
                if (!this.showedAlert) {
                    this.confirmExitApp();
                } else {
                    this.showedAlert = false;
                    this.confirmAlert.dismiss();
                }
            }

            this.nav.pop();
        });

    });
}

confirmExitApp() {
    this.showedAlert = true;
    this.confirmAlert = this.alertCtrl.create({
        title: "Salir",
        message: "¿ Esta seguro que desea salir de la aplicación ?",
        buttons: [
            {
                text: 'Cancelar',
                handler: () => {
                    this.showedAlert = false;
                    return;
                }
            },
            {
                text: 'Aceptar',
                handler: () => {
                    this.platform.exitApp();
                }
            }
        ]
    });
    this.confirmAlert.present();
}

Upvotes: 5

raj
raj

Reputation: 6090

export class MyApp{  
  constructor(public alert: AlertController,public platform: Platform){}  
  exit(){
      let alert = this.alert.create({
        title: 'Confirm',
        message: 'Do you want to exit?',
        buttons: [{
          text: "exit?",
          handler: () => { this.exitApp() }
        }, {
          text: "Cancel",
          role: 'cancel'
        }]
      })
      alert.present();
  }
  exitApp(){
    this.platform.exitApp();
  }
}

If you would like to enable back button exit, add event listener for it and call exit function.

You can use this.platform.registerBackButtonAction(this.exit) for it.

Upvotes: 6

Related Questions