ngx-toastr, Toast not showing in Angular 7

后端 未结 16 1677
清歌不尽
清歌不尽 2021-02-01 12:37

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 noth

相关标签:
16条回答
  • 2021-02-01 13:02

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

    0 讨论(0)
  • 2021-02-01 13:05

    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

    0 讨论(0)
  • 2021-02-01 13:07

    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

    0 讨论(0)
  • 2021-02-01 13:07

    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;
    }
    
    0 讨论(0)
  • 2021-02-01 13:08

    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;
    }
    
    0 讨论(0)
  • 2021-02-01 13:09

    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.

    0 讨论(0)
提交回复
热议问题