CODEWITHSUNDEEP
angulartoastr
AbhiRam
AbhiRam

Reputation: 2061

ngx-toastr, Toast not showing in Angular

I'm developing a web app using Angular and I wanted to include ngx-toastr to send notifications to users, but it isn't working as expected. When I trigger a toast nothing happens. What did I do wrong?

My code is below:

export class AppComponent  {
  constructor(
    private toast: ToastrService,
  ) { }
  
  test() {
    this.toast.success("I'm a toast!", "Success!");
  }
}

https://stackblitz.com/edit/angular-wsfroy?file=src%2Fapp%2Fapp.component.ts

Upvotes: 3

Views: 11156

Answers (3)

Lok C
Lok C

Reputation: 401

In your angular.json

"styles": [
  "styles.scss", 
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

Then run npm install before you run npm start or ng serve.

Upvotes: 0

Banny
Banny

Reputation: 111

In your styles.css add

@import "toastr";

Upvotes: 2

dileepkumar jami
dileepkumar jami

Reputation: 2265

You missed to add the css needed by the toast.

Add in the styles array of angular.json like below

   "styles": [
              "src/styles.css",
              "node_modules/ngx-toastr/toastr.css"
            ],

Look at the updated stackblitz here

Upvotes: 8

Related Questions