Toastr in Angular 16 is not popping

Question

// --- app.module.ts

...
  imports: [
    ....
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    }),
    ....
  ],
...

// --- app.module.ts

// --- Component in child module

...
  ngOnInit(): void {
    this._toastr.success('DC Retrived',  'Toaster test', {
      timeOut: 3000,
    });
  }
...

// --- Component in child module

I tried importing the toastr css in app.module.scss and in angular.json and nothing worked.

Answer 1

Possibly ngOnInit is too soon. Try this:

ngAfterViewInit(): void {
  this._toastr.success('DC Retrived',  'Toaster test', {
    timeOut: 3000,
  });
}

And in angular.json:

"styles": [
  "node_modules/ngx-toastr/toastr.css",
  "src/styles.scss"
]

Note you will have to restart the Angular dev server to pick up changes in angular.json

Answer 2

The problem With me was importing the toastr.css file like this in the "angular.json" file.

"styles": [
  "node_modules/ngx-toastr/toastr.css",
  "src/styles.scss"
]

When I imported the file in "styles.scss" Every thing showed up again

@import 'ngx-toastr/toastr';