Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Property does not exist on type 'ToastrModule'

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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 ?

>Solution :

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!');
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading