CODEWITHSUNDEEP
javascriptangulartypescripttoastr
Alex Gordon
Alex Gordon

Reputation: 60871

how to render toastr within angular?

How do you import toastr into an angular app?

I'm following the Angular Fundamentals course, and attempting to simply display toastr.success from within my export class:

handleThumbnailClick(eventName){
    toastr.success(eventName)
}

And getting the following error:

enter image description here

The full ts file is:

import { Component, OnInit } from '@angular/core'
import { EventService } from './shared/event.service'

declare let toastr

@Component({
    selector: 'events-list',
    template: `<div>
                    <h1>upcoming angular components</h1>
                    <hr>
                    <div class="row">
                        <div class="col-md-5" *ngFor="let event of events">
                            <event-thumbnail (click)="handleThumbnailClick(event.name)" [event]="event"></event-thumbnail>
                        </div>
                </div>

</div>`})
export class EventsListComponent implements OnInit   {
    events:any[]
    constructor(private eventService: EventService) {
    }

    ngOnInit() {
        this.events = this.eventService.getEvents()
    }

    handleThumbnailClick(eventName){
        toastr.success(eventName)
    }
}

I've run this to install toastr:

npm install toastr --save

And have included these in the angular.json file:

enter image description here

What am I doing wrong? Why doesn't toastr render?

Upvotes: 3

Views: 634

Answers (2)

Piyush Prakash
Piyush Prakash

Reputation: 1

That works for me. Make sure to run :

  1. npm i --save-dev @types/toastr
  2. Add required paths in angular.json
"styles": [
    "node_modules/toastr/build/toastr.min.css"
],
"scripts": [
    "node_modules/toastr/build/toastr.min.js"
]
  1. Use import * as toastr from 'toastr'; instead of declare let toastr

Upvotes: 0

Ghonima
Ghonima

Reputation: 3092

Use this import statement 

import * as toastr from 'toastr';

instead of 

declare let toastr

and your angular.json, it should be like this

        "styles": [
          "src/styles.css",
          "../node_modules/toastr/build/toastr.min.css"
        ],
        "scripts": [
          "../node_modules/toastr/build/toastr.min.js"
        ]

Upvotes: 5

Related Questions