Create a service to manage app alerts

Ionic Framework ionic-v3
1

Hi everyone.

I have a requirement to display an alert each time that the user tries to save something in storage and it did not work (for example when the device storage is full). This alert has a button to try again which calls a local method of the page that displays it.

Having the alert in the page works as expected, however I have the same code repeated in many pages. The difference is that the “Try again” button calls different local handlers in each page that do different things.

Is it possible to unify all these alerts under one service? How could I call the corresponding handler if the alert is in a different class? Is this a correct approach to the problem? I would like to apply the same solution to the other alerts that are shared through my app and remove duplicated code.

I appreciate your support.

2

Should be doable and based on your context - is good approach.
Here is similarly I am using a “toast” provider (service):

import { Injectable } from '@angular/core';
import { ToastController } from 'ionic-angular';

@Injectable()
export class ToastProvider {

    public toast = null;

    constructor (
        private toastCtrl: ToastController
    ) {
    }

    presentToast(message, position, cssclass) {
        if (this.toast) {
            this.toast.dismiss();
            this.toast = null;
        }
        this.toast = this.toastCtrl.create({
            message: message,
            closeButtonText: "OK",
            showCloseButton: true,
            cssClass: cssclass,
            position: position,
        });
        this.toast.present();
    }
    presentSimpleToast(message, position) {
        if (this.toast) {
            this.toast.dismiss();
            this.toast = null;
        }
        this.toast = this.toastCtrl.create({
            message: message,
            duration: 3000,
            position: position
        });
        this.toast.present();
    }
}
3

We have similar kind of requirement. We need to close all open alerts from one service. And this is how we handle alerts in one service,
May be you can adjust it according to your requirements.

import { AlertOptions, Alert, AlertController } from 'ionic-angular';
import { Injectable } from '@angular/core';


@Injectable()
export class PopupProvider {
  private alerts: Alert[] = [];

  constructor(public alertCtrl: AlertController) {
  }

  create(opts?: AlertOptions): Alert {
    let alert = this.alertCtrl.create(opts);
    this.alerts.push(alert);
    return alert;
  }

  dismissAllAlerts(): void {
    for (let alert of this.alerts) {
      if (alert && !alert.isLast()) {
        alert.dismiss();
      }
    }
    this.alerts = [];
  }
}
4

Hi, thanks for your answer!

I created a service like the “PopupProvider” . This class loads the texts for the alerts and manages present and dismiss of the alerts.

For the specific cases were the alert button handler needs to call a Page local method, I did something based on this source: Return value from alert confirmation

@Injectable()
export class PopupProvider {
public alertExample: any;

…

presentAlertExample() {
this.alertExample = this.alertController.create( {
title, subtitle…
buttons [{
…
handler:() => {
this.alertExample.dismiss(“someValue”);
return false;
}
}]

 })

}
}

In the page code:

someFunction() {
…
}

callAlertProviderFunction() {
this.popupProvider.presentAlertExample();
this.popupProvider.alertExample.onDidDismiss(() => {
this.someFunction();
});
}

In short, I declare the on dismiss handler in the page code when I need to call a local function. It may not be ideal, but at least page logic stays in page classes and all the alert logic is in the provider.