ngx-toastr, Toast not showing in Angular 7

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 nothing happens, except for a box in the size of a toast is appearing in bottom right corner but only when hovered over by the coursor. Following an example of how I trigger the toastr function. Test is invoked by the click of a button.

import {ToastrService} from 'ngx-toastr';
@Component({
  selector: 'app-action-controls',
  templateUrl: './action-controls.component.html',
  styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
  test(){   
          this.toast.success("I'm a toast!", "Success!");
  }
 constructor(private toast: ToastrService) { }
}

I includet the library css files in the angular.json file in my project like this:

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

And like this in my app.module.ts file:

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

I can't figure out what i'm doing wrong, has anyone had similar experiences? Many thanks in advance!

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?

Update:

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: https://stackoverflow.com/questions/17635655/setting-toastr-opacity#answer-17640150

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

When I read this thread, I guess you could fix your problem. However, I would leave the solution to my problem here unless someone might have the same as us.

What I have done to fix the problem is: to add @import '~ngx-toastr/toastr.css'; into style.css under the root directory of the project will get rid of the issue.

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

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;
}

In my case, It was due to a conflict between some CSS. I overwrote that CSS by simply importing the styles of ngx-toastr in styles.css

styles.scss

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

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

you need to import

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and add that under the @NgModule imports

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
   ......
  ],
  imports: [
     ......
    BrowserAnimationsModule,
    ToastrModule.forRoot({ timeOut: 2000 enableHtml: true }),
  ],
  providers: [
    ToastService,
     ......
  ],
  bootstrap: [AppComponent]
})

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.

For me, non of these solutions helped. What I did in the end was to set this in the Angular.json for the production configuration:

    "extractCss": false

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

For Angular - Material or any angular project we SHOULD need to import modules in sequence like this in your app.module.ts:

imports: [
 BrowserModule,
 BrowserAnimationsModule,
 ToastrModule.forRoot({
    timeOut: 3000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
    closeButton: true
 })
]

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

I have imported ~ngx-toastr/toastr.css in my style.css of angular app used

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

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.

If you are still looking for an easy solution I just added the following line to global styles.css:

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

and it worked