At this point the alert does not have any state data to render content and classNames, only containers. Pass in the state of the component in app/templates/application.hbs:

...
  {{flash-alert message="This is the Alert Message" alertType="success"}}
  {{outlet}}
</div>

Start the server and open your browser to http://​localhost:4200/​sightings to see the {{flash-alert}} component rendered with the inline data you supplied (Figure 25.3).

Figure 25.3  Flash alert

Now that the alert is on the screen, you want to set the properties of message and alertType dynamically. You will need an application controller to achieve this. Using the Ember CLI generator, add the controller:

ember g controller application

The application controller will maintain the dynamic state of the {{flash-alert}} component. The controller will need properties to maintain the state of the alert. Add the following property to app/controllers/application.js:

import Ember from 'ember';

export default Ember.Controller.extend({
  alertMessage: null,
  alertType: null,
  isAlertShowing: false
});

You added properties that will be set by an action. Now you have controller properties to pass to the flash-alert component in app/templates/application.hbs:

...
</header>
<div class="container">
  {{#if isAlertShowing}}
    {{flash-alert message="This is the Alert Message" alertType="success"}}
                          alertMessage alertType=alertType}}
  {{/if}}
  {{outlet}}
</div>

The controller’s properties can now be set from an action. The application only needs to render the component when the isAlertShowing property is set to true and when the other properties have values. The action to set these properties will be coming from controllers all over the application. How do you bubble these actions up? Ember does it for you (Figure 25.4).

Figure 25.4  Flash alert process

You have to add an action to a route. You can call an action from a controller, and it will hit the current controller, then the current route, the parent routes, then the application route.

Because your flash-alert is in the app/templates/application.hbs, you need an application route. Create one:

ember g route application

You will see this message returned in the command line:

[?] Overwrite app/templates/application.hbs?

Enter n or no to continue. You do not want to overwrite the template file you just created. You only want to add the JavaScript file app/routes/application.js.

Next you will need to edit the route in app/routes/application.js:

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    flash(data){
      this.controller.set('alertMessage', data.message);
      this.controller.set('alertType', data.alertType);
      this.controller.set('isAlertShowing', true);
    }
  }
});