CODEWITHSUNDEEP
cssangularngx-toastr
v1n_vampire
v1n_vampire

Reputation: 1595

ngx-toastr styling not working in Angular 9

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.

Upvotes: 1

Views: 3809

Answers (2)

Basil Abbas
Basil Abbas

Reputation: 1802

Using Angular 18 Standalone. As per the NGX-Toastr documentation, you need to create a new CSS file in your assets/css folder and then include the file path in our angular.json file.

enter image description here

 "styles": [
          "src/styles.css",
          "src/assets/css/style.bundle.css",
          "src/assets/css/toast.css" 
        ],

You can get the official CSS file here. https://github.com/scttcper/ngx-toastr/blob/HEAD/src/lib/toastr.css

Upvotes: 0

Kerox
Kerox

Reputation: 760

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
],

Upvotes: 2

Related Questions