Ionic: How to not stack multiple toast notifications?

Issue

I got the following Ionic code fragment for displaying alarms / errors in an industrial App:

showError(message: string) {
  let toast = this.toastController.create({
      message: message,
      position: 'top',
      duration: 5000,
      cssClass: 'danger',
      showCloseButton: true
  });
  toast.present();
}

The App triggers the error message every time it detects a connection issues, which will be also roughly on a 5 second timer.

Multiple calls to this method will lead to 2 or more error messages shown on top of each other if the timing of this code is changed. Can I somehow detect that a toast is already being displayed? Also then, the 5000 msec timer would not be necessary and I can just remove the error message again when the connection is re-established.

Thanks and BR Florian

Solution

You could store your Toast object in a variable outside your function, and call the dismiss() method before showing the next toast :

Ionic 4

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


toast: HTMLIonToastElement;    

showError(message: string) {
    try {
        this.toast.dismiss();
    } catch(e) {}

    this.toast = this.toastController.create({
        message: message,
        position: 'top',
        duration: 5000,
        color: 'danger',
        showCloseButton: true
    });
    toast.present();
}

Ionic 3

import { ToastController, Toast } from 'ionic-angular';


toast: Toast;    

showError(message: string) {
    try {
        this.toast.dismiss();
    } catch(e) {}

    this.toast = this.toastController.create({
        message: message,
        position: 'top',
        duration: 5000,
        cssClass: 'danger',
        showCloseButton: true
    });
    toast.present();
}

Answered By - jbgt