ngx-toastr, Toast not showing in Angular 7

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

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.