ngx-toastr, Toast not showing in Angular 7

Solution 1:

I was able to make a minimal reproduction of your issue, and I don't see any problems: https://stackblitz.com/edit/angular-avcidu

Is it possible that you have some custom styles that conflict with the toastr.css styles, or a template that is malformed (an unclosed div, for example)?

Are you using the latest version of ngx-toastr? (9.1.1 at the time of this post)

What does your template look like?

Update:

The previous stackblitz now shows the replicated problem. Here is the link again: https://stackblitz.com/edit/angular-avcidu

Looks like both bootstrap and ngx-toastr use the .toastr class, affecting the opacity property on the toastr div.

This thread has a workable answer: Setting toastr opacity?

The answer therein is to force the opacity to 1. Add this your custom stylesheet:

#toast-container > div {
    opacity:1;
}

And here's the working stackblitz: https://stackblitz.com/edit/angular-gjazzq

Solution 2:

When I read this thread, I guess you could fix your problem. However, I would leave the solution to my problem here unless someone might have the same as us.

What I have done to fix the problem is: to add @import '~ngx-toastr/toastr.css'; into style.css under the root directory of the project will get rid of the issue.

Solution 3:

Even after adding the opacity css code from the above answers in my global style.scss, it did not solve my problem entirely; I was getting a blank white box.

After adding the additional css mentioned in this GitHub post, the toasts are working correctly.

The relevant code from the above post is below:

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}