A service wrapper for toastr.js with auto injection into routes, components, and controllers.
- 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)
ember install ember-toastrYou 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:
See the toastr.js demo for other possible uses, and the toastr.js documentation for explanation of options.
A method with the above default values for displaying a success toast.
A method with the above default values for displaying a info toast.
A method with the above default values for displaying a warning toast.
A method with the above default values for displaying an error toast.
A method to clear all toasts, or the individual toast.
A method to remove all toasts, or the individual toast.
A property to access all toasts that are added.
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.
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');
See the Contributing guide for details.