Toaster not hiding - Angular 5

Question

I am using angular2-toaster but I am having issues ONLY on this project. I used it on multiple projects before and it works fine, but when I switched to angular 5 version I cannot get the toaster message to disappear. On success or error, I have a timeout which should hide the message, however it doesn't happen. This is my toaster config, if anyone had the same issue recently let me know, thanks!

if (showSuccessToast) {
        const toast: Toast = {
          type: 'success',
          title: 'Well Done !',
          body: toastMessage ? toastMessage : 'Operation successful.',
          showCloseButton: true,
          timeout: 2000,
          closeHtml: '<div class="toaster-close-icon"></div>'
        };

        this.toasterService.pop(toast);
      }

Answer 1

As I can see in the documentation there is a point: Version ^ 5.0.0 requires either .forRoot() or .forChild() ToasterModule inclusion.

Could you try to add .forRoot() for ToasterModule? forRoot guarantees that you create service instances only once. So it might solve your problem

Answer 2

To remove any stuck msg you can clear them all by using this.toaster.clear();

  showMsg(type, msg, time) {
    this.toaster.pop(type, msg, '');
    setTimeout(() => {
          this.toaster.clear();
    }, time)
  }

or by specifying toastId and toastContainerId to clear function this.toasterService.clear(toast.toastId, toast.toastContainerId)

var toast = this.toasterService.pop('success', 'title', 'body');
this.toasterService.clear(toast.toastId, toast.toastContainerId)

Answer 3

Solved it with just removing all the custom settings, for some reason it wouldn't work with 2 sec timeout... Idk, for all other pojects it worked, for this one it wouldn't.