Ionic: how not to add a few toast notifications?

Question

I have the following snippet of ion display code for displaying alarms / errors in an industrial application:

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

The application launches an error message every time it detects a connection problem, which will also be around a 5-second timer.

Several calls to this method will result in 2 or more error messages displayed on top of each other if the time of this code is changed. Can I somehow find out that the toast is already displayed? In addition, a 5000 ms timer is not needed, and I can simply delete the error message again when the connection is restored.

Thanks and BR Florian

Answer 1

Toast reject(), :

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();
}

Answer 2

: -)

// ToastService.ts
import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';

@Injectable()
export class ToastService {

  private toasts: Toast[] = [];

  constructor(private toastCtrl: ToastController) {}

  push(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 1500,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      this.toasts.shift()
      if (this.toasts.length > 0) {
        this.show()
      }
    })

    this.toasts.push(toast)

    if (this.toasts.length === 1) {
      this.show()
    }
  }

  show() {
    this.toasts[0].present();
  }

}

Answer 3

, , , .

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


toast: Toast;    
isToastPresent:boolean=false;

show(){

this.isToastPresent?'':this.showError('No network');

}

showError(message: string) {

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

    this.toast.onDidDismiss(() => {
      this.isToastPresent=false;
      console.log('Dismissed toast');
    });

}

Answer 4

Ionic 4 Toast

Ionic 4 Toast ,

// Call this method  
showOnceToast(){
  this.toastController.dismiss().then((obj)=>{
  }).catch(()=>{
  }).finally(()=>{
    this.manageToast();
  });
}

manageToast() {
  this.toastInstance = this.toastController.create({
    message: 'Your settings have been saved.',
    duration: 2000,
    animated: true,
    showCloseButton: true,
    closeButtonText: "OK",
    cssClass: "my-custom-class",
    position: "middle"
  }).then((obj) => {
    obj.present();
  });
}

: http://www.freakyjolly.com/ionic-4-adding-toasts-in-ionic-4-application-using-ui-components-with-plugins/

Answer 5

private mensajeErrorEnvioTramiteActivo = false;
  mensajeErrorEnvioTramite() {
    if (!this.mensajeErrorEnvioTramiteActivo) {
      this.mensajeErrorEnvioTramiteActivo = true;
      let toast = this.toastCtrl.create({
        message: "No se pudo enviar los tramites formalizados, por favor reenvielos",
        position: 'top',
        showCloseButton: true,
        closeButtonText: 'REENVIAR',
      });

      toast.onDidDismiss(() => {
        this.reenvioKits.reenviarTramites();
        this.mensajeErrorEnvioTramiteActivo = false;
      });
      toast.present();
    }

  }