Ngx-toastr: Toast not visible, it can be seen in html dom through inspect elements but nothing shows up.

[sabeehshah]

I included the style sheet in angular.json file,
i imported the toastr module in my app module and included the import as well.
i imported the toastrservice in my component then on my ngOnInit i called this method,
setTimeout(() => {
this.toastr.success('message','title', {timeOut:5000, closeButton:true});
}, 200);

but nothing shows up on the screen, though when i inspect element there is a container.

https://imgur.com/a/fHRpQBk

Sorry if its something simple that i am missing.

EDIT
https://imgur.com/a/0iKWZ65
It shows up like this at the bottom left of my screen. I think the styles are not being added maybe? This is what my styles look like in the angular.json file, i am pretty sure the path is correct.

"styles": [
              "src/styles.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/hover.css/css/hover.css",
              "./node_modules/ngx-toastr/toastr.css"
            ],

[scttcper]

looks like the styles are missing. try running npm install again and restarting your angular server

[sabeehshah]

Worked, thanks.

[yarrgh]

Always catches me as well. I forget that if I edit angular.json or anything outside of my src directory, I have to restart ng serve to pick up on those changes.

[grappetite-ali]

If you are using ngx-toastr with bootstrap, add below line to your global style file because bootstrap and ngx-toastr use the .toastr class, affecting the opacity property on the toastr div.

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

It will fix your problem.