Home

Quick Start

Add a message-container

First, you will need to provide a location for notifications to be rendered. This is done with the {{message-container}} component. Add one to your application.hbs (wherever makes the most sense) so it is always available.

<header>...</header>
<div class='breadcrumbs'>...</div>
{{message-container}}
{{outlet}}

Queue a message

Whenever you need to display a notification after the next transition, you will use the message-queue service's queue method.

// user/edit/controller.js
messages: inject.service('message-queue'),

actions: {
   save() {
      get(this, 'model').save().then(() => {
         get(this, 'messages').queue('Your information has been successfully updated!');
         this.transitionToRoute('user.index');
      });
   },
},

The provided notification will be displayed in the default message-container after the transition completes.

Show a message

Perhaps you do not want to wait until the next transition to display a notification, but instead want it to be displayed right away. In this case, use the add method.

// user/edit/controller.js
messages: inject.service('message-queue'),

actions: {
   save() {
      get(this, 'model').save().then(
         () => {
            get(this, 'messages').queue('Your information has been successfully updated!');
            this.transitionToRoute('user.index');
         },
         (fault) => {
            get(this, 'messages').add(`Well that doesn't look right: ${fault}`);
         }
      );
   },
},

The provided notification will be displayed immediately.