1

I'm a beginner at Angular and I need to add a notification to a preexisting code. I've installed toastr successfully and the notification div actually appear, but it's like the css not working at all.

I'm using this at my scss:

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

This is my html:

<div id="mydiv">
    <div>
        my content
    </div>
    
    <div toastContainer></div>
</div>

This is roughly what happened on my html when the notice appear:

<div id="mydiv">
    <div>
        my content
    </div>
</div>
<div>my toastr notification appear here</div>

The problem is mydiv is a full screen element, so the notice is hidden on the bottom of the screen. I tweaked the css manually while inspecting the element, and it appears that my notification message did show but the css not working somehow, it's empty of any styling, just plain text below mydiv.

And somehow the notification element appear outside mydiv even when I put it inside.

I checked Sources tab on the browser, and node_modules/ngx-toastr/toastr.css was there. Not sure if it means it was successfully loaded though.

My Angular 9.1.12, ngx-toastr 12.1.0.

v1n_vampire
  • 1,575
  • 3
  • 13
  • 21

1 Answers1

2

You have to add the style file to angular.json under styles

"styles": [
  "src/assets/styles/styles.scss",
   "./node_modules/ngx-toastr/toastr.css"  // here
],
Kerox
  • 590
  • 1
  • 8
  • 14