If you read the readme in the link provided, it clearly indicates that you must supply your own ToastrContainer.
import {
ToastrModule,
ToastContainerModule // Make sure to include this module
} from 'ngx-toastr';
@NgModule({
declarations: [AppComponent],
imports: [
//...
ToastContainerModule // Make sure to include this module
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
In addition, remember to add a div element to your root component (or any desired location for the container) like so:
@Component({
selector: 'app-root',
template: `
<h1><a (click)="onClick()">Click</a></h1>
<div toastContainer></div> <!-- Include this line, above which should be your router -->
`
})
export class AppComponent implements OnInit {
// Obtain a reference to the directive
@ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;
constructor(private toastrService: ToastrService) {}
ngOnInit() {
// Set up the container
this.toastrService.overlayContainer = this.toastContainer;
}
onClick() {
this.toastrService.success('in div');
}
}