ember-toastr

ember-toastr

A service wrapper for toastr.js with auto injection into routes, components, and controllers.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above
• Requires jQuery (see https://github.com/emberjs/ember-jquery)

Usage

ember install ember-toastr

You can now access the notifications service as toast. You can inject it in routes, controllers or components using the following syntax:

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class SomeController extends Controller {
  @service toast;

  @action
  test() {
    let title = 'Test';
    let message = 'A test happened';

    this.toast.info(message, title, {
      // options here
    });
  }
}

If using newer versions of Ember you can inject using the decorator syntax, see the Ember documentation for @ember/service#inject decorator.

You can also use toast.clear() and toast.remove() to remove all toasts. For example:

<button {{on "click" this.toast.clear}}>Clear</button>

See the toastr.js demo for other possible uses, and the toastr.js documentation for explanation of options.

API

toast Service

success(msg = '', title = '', options = {})

A method with the above default values for displaying a success toast.

info(msg = '', title = '', options = {})

A method with the above default values for displaying a info toast.

warning(msg = '', title = '', options = {})

A method with the above default values for displaying a warning toast.

error(msg = '', title = '', options = {})

A method with the above default values for displaying an error toast.

clear() or clear(toast)

A method to clear all toasts, or the individual toast.

remove() or remove(toast)

A method to remove all toasts, or the individual toast.

toasts

A property to access all toasts that are added.

Configuration

These are the default options:

ENV['ember-toastr'] = {
  toastrOptions: {
    closeButton: true,
    debug: false,
    newestOnTop: true,
    progressBar: true,
    positionClass: 'toast-top-right',
    preventDuplicates: true,
    onclick: null,
    showDuration: '300',
    hideDuration: '1000',
    timeOut: '4000',
    extendedTimeOut: '1000',
    showEasing: 'swing',
    hideEasing: 'linear',
    showMethod: 'fadeIn',
    hideMethod: 'fadeOut',
  },
};

All options in toastrOptions are direct options for toastr.js.

Testing Toasts in Acceptance Tests

Toastr messages are rendered inside a div#toast-container, but outside of div#ember-testing-container, where all of the testing action takes place. Therefore, you need to supply a second scope parameter of document to your assert.dom(...) calls.

For example: assert.dom('#toast-container', document).includesText('ERROR: Invalid username or password');

Contributing

See the Contributing guide for details.