Property does not exist on type 'ToastrModule'-CodePudding

I have a problem using ToastrModule in Angular. I installed the packages:

npm install ngx-toastr --save
npm install @angular/animations --save

Then I added "node_modules/ngx-toastr/toastr.css" in angular.json

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

and imported BrowserAnimationsModule and ToastrModule in app.module.ts

import { ToastrModule } from 'ngx-toastr';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    RouterModule.forRoot(appRoutes)
  ],

In register.component.ts

import { Component, OnInit } from '@angular/core';
import { ToastrModule } from 'ngx-toastr';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  constructor(private toastr:ToastrModule) { }

  ngOnInit(): void {
  }
  
  onRegiterUser(){
    this.toastr.success("");
  }

}

indicates an error

Error: src/app/users/register/register.component.ts:17:17 - error TS2339: Property 'success' does not exist on type 'ToastrModule'.

17     this.toastr.success("");
                   ~~~~~~~




× Failed to compile.

Any ideas why it doesn't work ?

CodePudding user response：

Doc says clearly that you should inject ToastrService not ToastrModule https://www.npmjs.com/package/ngx-toastr

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

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

CodePudding user response：

According to the docs you should inject the ToastrService in your constructor so you have to change this:

constructor(private toastr: ToastrModule) {}

into this:

constructor(private toastr: ToastrService) {}