ngx-toastr, Toast not showing in Angular 7

Question

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?

Hope this answer would help https://stackoverflow.com/questions/52940941/unable-to-display-toast-message-in-angular-5 — Sajeetharan, Dec 31 '18 at 16:24
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. — Marvin W., Dec 31 '18 at 16:40
That could be because of your custom css. upvote the answer if it helped — Sajeetharan, Dec 31 '18 at 16:42
I fixed it by adding @import '~ngx-toastr/toastr.css'; into style.css — reverie_ss, Aug 29 '19 at 09:50

Keenan Diggs · Accepted Answer · 2018-12-31T20:20:17.937

95

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

edited Dec 31 '18 at 20:20

answered Dec 31 '18 at 16:55

Keenan Diggs

2,287
16
17

1

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? – Marvin W. Dec 31 '18 at 18:09
2

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. – Keenan Diggs Dec 31 '18 at 20:23
Thank you so much this made the deal, now it works perfectly! – Marvin W. Jan 01 '19 at 11:29
Note that for `positionClass: 'toast-top-full-width'`, it doesn't do a very good job though... – dstj Jan 03 '19 at 22:08
@dstj In what way? The opacity remains unbroken in that configuration. The OP's specific problem was the opacity. Is there a different problem? – Keenan Diggs Jan 04 '19 at 18:46
@KeenanDiggs, yes it makes it visible, but it's not "full width" as before Bootstrap 4.2.1. I forked your [Stackblitz](https://stackblitz.com/edit/angular-b18xmd) – dstj Jan 04 '19 at 18:54
Here's the link to Bootstrap 4.2.1 [issue on the ngx-toastr repo](https://github.com/scttcper/ngx-toastr/issues/602) – dstj Jan 04 '19 at 19:01
@KeenanDiggs Thanks a lot man !! I was scratching my head where is the root casue of the issue ?? – praveen Jan 22 '19 at 14:57
Wouldn't have find this so fast without your answer! – Pieter De Bie Feb 06 '19 at 14:45
wow!!!!! if I wouldn't see this, I would have been digging another 3 hours and pulling out my last a few hair on my head! Thanks man! – curiousBoy Feb 19 '19 at 01:55
working great for me. i am looking for the solution since 3 days. i am thinking that there is a problem in importing toastr module but this is a issue of css. thank you.. – Saurabh Solanki Mar 07 '19 at 05:31
If you're using SASS, just don't import "~bootstrap/scss/toasts" assuming you have no need for Bootstrap's toast alongside ngx-toastr. Should also avoid any further conflicts until ngx-toastr addresses this. – Michael Mar 11 '19 at 18:58
not working for me, apparently, the css mention background propertiess, but no color, adding a background:somecolor works, so the problem must come from toast itself (.ts) – user7082181 Jun 20 '19 at 07:00
On safari I notice it periodically won't render until I click on something else in the UI like a dropdown or another animation. Might be a issue with Angular's animation module though. – Mark Feb 03 '20 at 23:27

Tung · Answer 2 · 2022-10-16T20:59:54.470

40

When reading through 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.

edited Oct 16 '22 at 20:59

answered Jul 19 '19 at 05:43

Tung

1,579
4
15
32

2

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. – AllJs Nov 19 '19 at 03:24

Pranav S · Answer 3 · 2019-04-12T10:23:11.940

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

more like "toasty-type-error..." in the last versions – user7082181 Jun 20 '19 at 07:02 — user7082181, Jun 20 '19 at 07:02

score 6 · Answer 4 · edited Jan 22 '19 at 03:53

6

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

edited Jan 22 '19 at 03:53

Arun Prasad E S

9,489
8
74
87

answered Jan 15 '19 at 10:25

Alain Boudard

768
6
16

2

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; } – Sefa Jan 24 '19 at 14:21
Exactly, that's not a big deal indeed but I often loose track of such a fix, that's why I prefer not to :) – Alain Boudard Jan 25 '19 at 14:06

score 5 · Answer 5 · answered Mar 21 '19 at 10:31

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

score 5 · Answer 6 · answered Nov 09 '20 at 07:42

5

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

answered Nov 09 '20 at 07:42

Oliver

561
1
8
14

score 4 · Answer 7 · answered Feb 07 '19 at 07:27

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

score 2 · Answer 8 · answered Jul 22 '19 at 14:25

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

score 2 · Answer 9 · answered Dec 13 '19 at 07:37

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]
})

score 2 · Answer 10 · edited Mar 24 '22 at 21:39

2

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

edited Mar 24 '22 at 21:39

vvvvv

25,404
19
49
81

answered Mar 24 '22 at 21:37

Allie Moosa

422
1
4
12

score 1 · Answer 11 · answered Nov 15 '19 at 06:14

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.

score 1 · Answer 12 · answered Jul 28 '20 at 10:56

1

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

answered Jul 28 '20 at 10:56

Akitha_MJ

3,882
25
20

score 1 · Answer 13 · answered Nov 06 '20 at 11:57

1

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

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

answered Nov 06 '20 at 11:57

Gauri Shukla

311
3
2

score 0 · Answer 14 · answered Nov 27 '19 at 11:42

0

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

answered Nov 27 '19 at 11:42

seawave_23

1,169
2
12
23

score 0 · Answer 15 · answered May 16 '20 at 21:11

0

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

answered May 16 '20 at 21:11

Nismi Mohamed

670
1
7
7

score 0 · Answer 16 · answered Jun 07 '20 at 08:18

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
 })
]

score 0 · Answer 17 · answered Jan 20 '21 at 08:43

0

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.

answered Jan 20 '21 at 08:43

Sai Sreenivas

11
3

score 0 · Answer 18 · answered May 05 '23 at 17:11

0

copying toastr.css code to my angular project styles.css file worked.

answered May 05 '23 at 17:11

Santhosh Reddy

1

That's a bad solution, the styles need to be maintained manually. – JSON Derulo May 11 '23 at 18:36

ngx-toastr, Toast not showing in Angular 7

18 Answers18

Update:

Linked