angularangular5angular-toastr

Unable to display Toast message in Angular 5

Hi I am developing web application in Angular 5. I am trying to display toast message in Angular 5 using https://www.npmjs.com/package/ngx-toastr. I have downloaded required npm modules and copied css to assets folder. Also I have added

import { ToastrModule } from 'ngx-toastr';

in app.component.ts.

I am trying to display toast message as

this.toastr.success('Hello world!', 'Toastr fun!');

When I run my solution I get below error.

enter image description here

When I run npm install, I get below warnings,

enter image description here Can someone help me to figure out the issue? Any help would be appreciated. Thank you.

enter image description here

Solution

  • Make sure you imported ToastrModule in app.module.ts

    import {ToastrModule} from 'ngx-toastr';

    in your component, you need to import the provider

    import { ToastrService } from 'ngx-toastr';

    injector in the constructor as DI

    constructor(public toastr: ToastrService) {}

    And you can invoke it as

    this.toastr.success(message, 'Success!');

    EDIT

    You need to move to angular6 inorder to make it work. Check the related issue here