Using toastr with webpack and TS

Framework Knowledge
#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 Likes
#2

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

1 Like
#3

Woops - forgot to add the css - edited the original

1 Like
#4

izitoast infinitely better btw

3 Likes
#5

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

1 Like
#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.

1 Like
#7

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
#8

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

1 Like