ngx-toastr, Toast not showing in Angular 7

ngx-toastr angular 8
ngx-toastr not working ie
ngx-toastr position center
ngx-toastr stackblitz
angular 7 notifier
angular bootstrap toast
angular material toaster
cannot read property toast top right of undefined ngx toastr

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: Setting toastr opacity?

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

How to Create Angular Toastr Notifications, --save. @angular/animations package is a required dependency for the default toast. npm install @angular/animations --save. I'm developing a web app using Angular and 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 my code is below pl

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

Implement Toastr Notification In Angular 7, You missed to add the css needed by the toast. Add in the styles array of angular.​json like below "styles": [ "src/styles.css",  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 co

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.

ngx-toastr, GitHub is home to over 50 million developers working together to host .com/​questions/53989445/ngx-toastr-toast-not-showing-in-angular-7#. ngx-toastr in Angular 7 and above. take a step-by-step approach to install and configure ngx-toastr in your Angular 7 project. package is a required dependency for the default toast.

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

ngx-toastr, Toast not showing in Angular, You can find the solution below till they fix it. https://stackoverflow.com/questions/​53989445/ngx-toastr-toast-not-showing-in-angular-7  In this post, I will tell you, Angular 7 Toastr Notifications Working Example. Toastr Notifications are the well designed popup message and easy to use and implement. Today I am implementing Toastr Notifications in Angular 7. I am very happy for Angular 7. I am showing toastr notifications in Angular 7 button click event.

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

Not showing unless hovering · Issue #605 · scttcper/ngx-toastr · GitHub, Keywords. ng2 · ngx · ngx-toastr · toastr-ng2 · angular · angular2 · typescript · alert · toast · toastr · angular toastr · notifications  In this article, we learned about Toastr and how we use Toastr notifications in Angular. Toastr provides some unique notification popups which we can use to display a message or any other notification within an application.

Not working with Bootstrap 4.2? · Issue #602 · scttcper/ngx-toastr , It is always good practice to display a particular message/notification approach to install and configure ngx-toastr in your Angular 7 project to the provider's array in the app.module.ts file, but not for the toaster service. Angular 7/8 | Adding Toastr Messages in Angular 4+ Web Application in Few Steps Last updated on October 15, 2019 Jolly.exe The application becomes more user-friendly when the user gets information about what is happening on screen.

ngx-toastr in Angular 7 and above - Better Programming, Toastr is a JavaScript library which is used to create a notification import { Component, OnInit } from '@angular/core';; import { ToastrService } from 'ngx-​toastr'; toastrwaring(); {; this.toastr.warning("Battery about to Die", 'Warning');; }; } we use the Toastr success, info, warning, and error classes to display  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. ngx-toastr, Toast not showing in Angular 7. 1.

Toastr not working with form submission using angular6 : Angular2, Showing notifications and alerts is a common use case that we encounter while npm install ngx-toastr --save npm install @angular/animations --save Click on the Show Toaster button when running the application on  From my initial quick tests on an empty project using Bootstrap 4.3.1 and ngx-toastr 9.2.0 toasts are showing up without having to add the opacity css in my project. Edit It's not fixed if you're using the ToastNoAnimation component instead of the default component.

Comments
  • Hope this answer would help stackoverflow.com/questions/52940941/…
  • Thank you very much for your answer, I have come a little further. Now the toast is rendered correctly, but still only displayed when you hover your mouse over it.
  • That could be because of your custom css. upvote the answer if it helped
  • I fixed it by adding @import '~ngx-toastr/toastr.css'; into style.css
  • Thank you so much for taking the time. I looked through all my templates and found no errors. Even with a minimal component like the one I wrote in my initial post, I didn't succeed. I'm also sure that it's not related to my css or scss files, because I have only a few styles that don't seem to be related to the problem. Is it possible that it is related to other libraries I use, for example bootstrap?
  • There's a naming collison for the .toastr CSS class in boostrap and ngx-toastr. See: 'getbootstrap.com/docs/4.2/components/toasts'. Also note my updated answer. Please mark as correct if it solves the problem adequately.
  • Thank you so much this made the deal, now it works perfectly!
  • Note that for positionClass: 'toast-top-full-width', it doesn't do a very good job though...
  • @dstj In what way? The opacity remains unbroken in that configuration. The OP's specific problem was the opacity. Is there a different problem?
  • more like "toasty-type-error..." in the last versions
  • Your solution worked for me and I should also add that you don't need to add the styles into angular.json. Once your global styles.scss imports the toastr css library, everything should just work.
  • The opacity 1 trick works but the background color of my toasts were white. To fix this you can use this additional CSS: .toast-error { background-color: #BD362F !important; } .toast-success { background-color: #51A351 !important; }
  • Exactly, that's not a big deal indeed but I often loose track of such a fix, that's why I prefer not to :)