How to not dismiss the alert box when clicking outside of it on Ionic

Question

I am building a ionic 2 app and I am using the following component

http://ionicframework.com/docs/components/#alert

  import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}

How can I make sure that when I click outside the box the alert is not dismissed?

Answer 1

Ionic 2/3:

As you can see in the AlertController docs, you can use the enableBackdropDismiss (boolean) option when creating the alert:

enableBackdropDismiss: Whether the alert should be dismissed by tapping the backdrop. Default true

import { AlertController } from 'ionic-angular';

// ...
export class MyPage {

  constructor(public alertCtrl: AlertController) {}

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      enableBackdropDismiss: false // <- Here! :)
    });

    alert.present();
  }
}

Ionic 4:

In Ionic 4 this property has been renamed to backdropDismiss:

backdropDismiss: If true, the alert will be dismissed when the backdrop is clicked.

import { AlertController } from '@ionic/angular';

//...
export class MyPage {

  constructor(public alertController: AlertController) {}

  async showAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK'],
      backdropDismiss: false // <- Here! :)
    });

    await alert.present();
  }
}