I\'m currently developing a web app using Angular 7. I wanted to include ngx-toastr to send notifications to users but it isn\'t working as expected. When I trigger a toast noth
Check the dependency.
OR
Try fixing the css import or
you can copy the css from here toastr.css and past it inside your global css or
create a new css file and add that file path in
angular.json -> styles: [..., "your/style/path/toastr.css"]
I know this question is 3 months old but just to inform everyone of the latest changes. ngx-toastr v10.0.2 no longer has this bug with bootstrap v4.2.1
So updating your ngx-toastr should fix this issue. It did for me :)
https://github.com/scttcper/ngx-toastr/releases
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?
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
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;
}
This is deeply linked to the new bootstrap version that comes with Toasts. Here is an issue discussing it :
https://github.com/ng-bootstrap/ng-bootstrap/issues/2945
I myself did keep the "old" 4.1.3 bootstrap, and will keep an eye on next ng-bootstrap version, that way I don't hack the css :)
#toast-container > div {
opacity:1;
}
I came across this issue again. The resources above said it was fixed but not for me. Even after getting the latest resources for both bootstrap and toastr. After much investigations I found that simply adding '!important' to the relevant toastr alert type backgrounds resolved this for me. See code below.
.toast-success{background-color:#51A351!important;}
.toast-error{background-color:#BD362F!important;}
.toast-info{background-color:#2F96B4!important;}
.toast-warning{background-color:#F89406!important;}
Although not good practice, I added the code the .min.css file. We do however host these files in our AWS CloudFront CDN and there is no need for duplicate CDN's.