Notifications sticking in my screen - with opacity 0 and blocking my navbar

[DedalusOsX]

So here's the problem:

I use Angular 7 and ngx-toastr's 10.2.0 version.

After the notification appears it's not removed, but rather it stays with changing only its own opacity!

app.module.ts BrowserModule, BrowserAnimationsModule, HttpClientModule, AppRoutingModule, ReactiveFormsModule, ToastrModule.forRoot({ timeOut: 1000, closeButton: true, }),

I've uploaded styles, through angular.json as mentioned in the documentation. Custom style that i applied - I don't believe they interfere, in any case here they are: _toastr.scss `.toast-top-full-width{

div{ border-radius: 0 !important; width: 100vw !important; height: $nav-size !important; box-shadow: none !important; } }

.toast-top-right{

div{ border-radius: 0 !important; box-shadow: none !important;

&.toast-error{background-color: $red !important;}
&.toast-success{background-color: $green !important;}
&.toast-warning{background-color: $yellow !important;}
&.toast-info{background-color: $blue !important;}

} } and the DOM looks like this after the notification is hidden:

×

Permission denied

`

Attaching image from html debugging!

[scttcper]

honestly i would try another version of angular 7. like 7.2.15

[DedalusOsX]

I've even upgraded to angular 8.2.8 and toastr 11.0.0. The problem still remains :/

[DedalusOsX]

@scttcper found the issue - so this problem occurs if i create a toaster service injectable like so:

in my app.module.ts

{ provide: 'notifier', useClass: ToastrService },

If i call ToastrService directly in the components the issue is gone. Please fix this. It's more convenient to use Injectable!

Thanks

[scttcper]

Not sure how you would fix that

[scttcper]

You could extend the module or implement your own instead of making only a provider. I think you're missing the forRoot function in yours https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr.module.ts#L22