ngx-toastr, Toast not showing in Angular 7

Question

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

Answer 1

i had this issue and i noticed that it was working but wasnt rendering the CSS properly, so then i checked the node_modules/toastr folder and realized that there were other CSS files, try including all the css files, because that worked for me.

add the css files in your angular.json file and try running yoru application again.

 "styles": [              
          "./src/assets/css/bootstrap.min.css",
          "......",              
          "./node_modules/ngx-toastr/toastr.css",
          "./node_modules/ngx-toastr/toastr-old.css",
          "./src/styles.css",
          ".......",
          "......",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
       ],

Answer 2

I have imported ~ngx-toastr/toastr.css but it was not working. So, I have copied all the CSS present in the above file and pasted it in my styles.css.

It's working for me.

Answer 3

In my case I have done to fix the problem is: by adding

 @import '~ngx-toastr/toastr.css';

into style.css - Main Style in root folder of your angular app

Answer 4

An alternative to Keenan Diggs' answers is providing an additional style class in the ToastrModule definition which sets opacity to 1. IMO this is a bit more clear what we're trying to achieve here and also doesn't have to depend on #toast-container.

app.module.ts:

ToastrModule.forRoot({
  toastClass: 'toast toast-bootstrap-compatibility-fix'
}),

Don't forget the original toast class.

Your (s)css file:

.toast-bootstrap-compatibility-fix {
  opacity:1;
}