Use ember-cli-flash add-on

Ember CLI
1

Has anybody ever used ember-cli-flash add-on or any other one ? The available ember screencast uses a different syntax compared to the official README of the add-on. Anyway, none of them worked for me, even if I inject a service in a controller or router like this:

export default Route.extend(ApplicationRouteMixin, {
  session:        service('session'),
  currentUser: service('current-user'),
  flashMessages: service('flash-messages'),
....

and try to add a message like that:

this.get('flashMessages').alert("Error");

In the application template:

<div class="grid-container">
  {{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash messageStyle='foundation'}}
  {{/each}}
  {{outlet}}
</div>

Any idea on how to get this working ? Thank you.

2

Finally, I figured out how to use it.

  1. Inject flash-messages service into your controller, router or service you need:
flashMessages: service('flash-messages'),
  1. Set the text and the flash message as follows in your controller, router or service:
this.get('flashMessages').alert('You are not signed in!');
this.get('flashMessages').success("Successfully signed in as ${user.username}!");
  1. Add the following code to your template to display flash messages:
#application.hbs

<div class="grid-container">
  {{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash messageStyle='foundation' class='callout small'}}
  {{/each}}
  {{outlet}}
</div>

The section class is to change according to Foundation or Bootstrap CSS classes. Hope this helps.

1 Like