Multiple Toasts

#1

Hi Everyone,

How do you deal with multiple toasts?. I sometimes have the occasion where 2 will happen at almost the same time and one will then cover the other up.

My only thoughts were to make a service and queue them, so they pop up one after the other.

What does everyone else do?

Thanks, Ryan

#2

You 're on the right track, there.

If you haven’t already, check out the ToastController specification. There it says that when a toast is dismissed via timeout or user input, the onDidDismiss function is called wherein you could notify a custom ToastProvider you have written that pops this specific toast from its queue.

#3

Thanks. Quite easy to implement and works like a charm :slight_smile:

#4

@ryanhow Would you be so kind a paste your custom working solution? :smiley:
Please.

#5

You’ll need to adapt this, but it’s just finds the next item on the queue and shows the toast. A simpler version would be to pop the items from the queue and just check for an empty queue.

    notifications: Array<Notification> = [];
    currentToast: Toast;

    show(notification: Notification) {
        this.notifications.unshift(notification);
        this.runPopupQueue();
    }

    runPopupQueue() {

        if (this.currentToast) return;

        this.notifications.some((notification) => {
            if (notification.popup && !notification.popupDone) {
                this.currentToast = this.toastController.create({message: (notification.important ? ' ! ' : '') + notification.message, duration: 5000, showCloseButton: true, closeButtonText: 'X'});

                this.currentToast.onDidDismiss(() => {
                    this.currentToast = null;
                    this.runPopupQueue();
                });

                this.currentToast.present();
                notification.popupDone = true;
                return true;
            }

            return false;
       });

    }
1 Like
#6

How would you implement this in an angular architecture?

Create a component (QueuedToast), or service? Or something else?

I guess a QueuedToast with embedded ToastQueueService is the cleanest, although I wouldnt mind letting a service do some UI - even though that goes against

Your thoughts?

#7

I just had it in a service and inject the toast controller. Mine is hooked into a larger notifications system.

#8

I just created an array with all msg I need and used that array on the toastController:

public toastMsgs: any = [];

async presentToast(msg) {
    this.toastMsgs.push(msg);
    const toast = await this.toastController.create({
        message: this.toastMsgs.toString().split(",").join("\n"),
        position: 'bottom',
        // showCloseButton: false,
        // closeButtonText: 'Ok',
        duration: 5000
    });
    toast.present();
    toast.onDidDismiss().then(() => {
        this.toastMsgs = [];
    });
}

Result:
Department changed successfully!
Name changed successfully!

1 Like
#9

For Ionic 4 Check this link if helps

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