AlertController is not presenting more than once in a page

Ionic Framework
1

Hi,
I’m trying to use hardware back button to exit from the app and have written the below code for it.

//imports
import { AlertController } from '@ionic/angular';
import { Plugins } from '@capacitor/core';

const { App } = Plugins;

//listener for backbutton
ngOnInit() {
    App.addListener('backButton', () => {
        this.alertCtrl.create({
          header: 'Exit App',
          message: 'Do you want to exit the app?',
          buttons: [
            {
              text: 'No',
              role: 'cancel'
            },
            {
              text: 'Yes',
              handler: () => {
                App.exitApp();
              }
            }
          ]
        }).then((alertEl) => {
          alertEl.present().then(() => {
             console.log('present');
          });
        });
      }
    });

`
Whenever hardware back button is hit while in home page, an alert must be presented to exit app or not.
The above code is working for the first the page is entered, that is the alert is presented, if Yes is clicked the app is exited, and if No, the alert is dismissed. But after dismissing the alert, the alert is not being presented.

The console log present is not being logged.
I tried replacing ngOnInit with ionViewWillEnter, but the result did not change.

Any help? Did anyone face this kind of issue?

2

Maybe…

3

Thanks for the response,

In my case the event handler provided in the backButton listener is fired, the alert element is created but the .present() is not doing anything i.e. the console.log('present') is not being executed.

4

What happens if you put the call to the alert in a separate function, as per the docs?

  async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['Cancel', 'Open Modal', 'Delete']
    });

    await alert.present();
  }