Using toastr with webpack and TS

After much messing around …

yarn add toastr
yard add @types/toastr

viewmodel.ts

import * as toastr from "toastr"
import "../../../node_modules/toastr/build/toastr.min.css";

public bind(){
   toastr.options.closeButton = true // etc
}
 // statusMessage just holds the status and message you wish to display
public setNotification() {
    switch (this.statusMessage.status) {
      case StatusType.error:
        toastr.error(this.statusMessage.message);
        break;
      case StatusType.info:
        toastr.info(this.statusMessage.message);
        break;
      case StatusType.ok:
        toastr.success(this.statusMessage.message);
        break;
      default:
        toastr.clear();
    }
  }

viewmodel.html

  <div if.bind="statusMessage.show">
    ${setNotification()}
  </div>

Hope it helps someone

2 Likes

Might help me. i need to work with some sort of toast system. Thanks!

1 Like

Woops - forgot to add the css - edited the original

1 Like

izitoast infinitely better btw

3 Likes

you might be right, I’ll have to experiment with that. The demo looks good.

1 Like

If you use Aurelia-materialize-bridge, you can just inject MdToastService and toast.show(“done”); It’s very easy if you’re okay with installing more than you need just for a toast.

1 Like

Do you have an example of how to get started with izitoast? I did the npm install but I’m not sure how to pull in the associated .css. Do you just add it to the index.ejs file or are you downloading it and including it in your static resources?

1 Like

I ended up just including it on my always loaded app html.

1 Like