Prevent multiple Ionic Alerts from stacking up - ionic-framework

Question

How can I detect if ionic 2 alert ui component instance is already open in order not to present another alert ?

Answer 1

I ended up writing a wrapping provider for Ionic's Alert controller like so :
import { Injectable } from '#angular/core';
import { AlertController } from 'ionic-angular';
#Injectable()
export class Alert {
public alertPresented: any;
constructor(public alertCtrl: AlertController) {
this.alertPresented = false
}
present(title, subTitle) {
let vm = this
if(!vm.alertPresented) {
vm.alertPresented = true
vm.alertCtrl.create({
title: title,
subTitle: subTitle,
buttons: [{
text: 'OK',
handler: () => {
vm.alertPresented = false
}
}],
}).present();
}
}
}
where alertPresented flag prevents more than one instance from being presented

Answer 2

I have another idea that you can assign message for a variable and check new message is equal to it or not. If equal, return.
This is my code and hope you enjoy with it.
import { Injectable } from '#angular/core';
import { AlertController } from 'ionic-angular';
#Injectable()
export class AlertProvider {
public showingMessage = ""
constructor(
private alertController: AlertController
) {}
showAlert(message) {
// Check this message is showing or not
if (message === this.showingMessage) {
return
}
this.showingMessage = message
this.alertController.create({
title: "APP_NAME",
message: message,
buttons: [{
text: "OK",
handler: () => {
this.showingMessage = ""
}
}]
}).present()
}
}

Answer 3

You can create an AlertService to handle that with more options without inject an event for the buttons
import { Injectable } from '#angular/core';
import { AlertController, Alert } from 'ionic-angular';
/**
* A simple alert class to show only one alert at the same time
*/
#Injectable()
export class AlertService {
currentAlert: Alert
constructor(private alertCtrl: AlertController) {
}
show(title, message, buttons: any = [], inputs: any = [], cssClass = '') {
if (!buttons.length) {
buttons.push('Ok')
}
let alertOptions: any = {
title: title,
subTitle: message,
buttons: buttons,
cssClass: buttons.length === 2 ? 'confirmAlert' : cssClass
}
if (inputs.length) {
alertOptions.inputs = inputs
}
if (!this.currentAlert) {
this.currentAlert = this.alertCtrl.create(alertOptions)
this.currentAlert.present()
this.currentAlert.onDidDismiss(() => {
this.currentAlert = null
})
}
return this.currentAlert
}
}
Regards, Nicholls

Answer 4

My solution worked, i had to put a boolean and set it true after a cancel event and set it false when an alert is presented
if (this.network_alert) {
let alert = await this.alertController.create({
header: "No Network",
message:
"Please check your internet connection",
buttons: [{
text: "Dismiss",
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
this.network_alert = true
}
}],
});
await alert.present();
this.network_alert = false
}
}