Next, you will add a component to be controlled by a state change in the application. Specifically, you will create a flash alert to display a message when you create a new listing.

One of the tenets of components is “data (or state) down and actions up.” Unlike controllers, components should not change the state of an application; they should pass changes up through actions. The state of a component, on the other hand, should be passed in from a parent template – data down (Figure 25.2).

Figure 25.2  Component Data Down Actions Up

A component could easily replace a controller by passing a route’s model directly to the component without the need for a controller’s decorators or actions.

You will create a new component and actions and add the component to the app/templates/application.hbs file to render a global message when a new sighting is created.

First, generate the new component in the terminal:

ember g component flash-alert

The {{flash-alert}} component will be a container element for a <strong> alert title and a text message.

Open and edit app/templates/components/flash-alert.hbs to make it so:

{{yield}}
<strong>{{typeTitle}}!</strong> {{message}}

Edit the component file app/components/flash-alert.js and add classNames:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ["alert"]
});

Now the component will render the following elements:

<div class="alert">
  <strong>{{typeTitle}}!</strong> {{message}}
</div>