Using toastr with webpack and TS

#1

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

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

#3

Woops - forgot to add the css - edited the original

#4

izitoast infinitely better btw

#5

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

#6

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.