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 noth

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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