Now that we have learned to create and customize Ember.js components, let's see how we can make our components interactive and handle different user interactions with our component.

Components are unique in the way they handle user interactions or the action events that are defined in the templates. The way we trigger actions from Ember.js components is identical to what we discussed in Chapter 3, Rendering Using Templates using the same {{action}} Handlebars.js helper method. The only difference is that the events from a component's template are sent directly to the component, and they don't bubble up to controllers or routes. If the event that is emitted from a component's template is not handled in Ember.Component instance, then that event will be ignored and will do nothing.

Let's create a component that has a lot of text inside it, but the full text is only visible if you click on the Show More button.

For that, we will have to first create the component's template. So let us create a new file, long-text.hbs, in the app/templates/components/ folder. The contents of the template should have a Show More and Show Less button, which show the full text and hide the additional text, respectively.

<p>
  This is a long text and we intend to show only this much unless the user presses the show more button below.
</p>
{{#if showMoreText}}
  This is the remaining text that should be visible when we press the show more button. Ideally this should contain a lot more text, but for example's sake this should be enough.
  <br>
  <br>
  <button {{action "toggleMore"}}> Show Less </button>
{{else}}
  <button {{action "toggleMore"}}> Show More </button>
{{/if}}

As you can see, we use the {{action}} helper method in our component's template to trigger actions on the component.

In order for the above template to work properly, we need to handle the toggleMore in our component class. So, let's create long-text.js at app/components/ folder.

import Ember from 'ember';

export default Ember.Component.extend({
   showMoreText: false,
   actions:{
    toggleMore: function(){
        this.toggleProperty("showMoreText");
    }
   }
});

All action handlers should go inside the actions object, which is present in the component definition. As you can see, we have added a toggleMore action handler inside the actions object in the component's definition. The toggleMore just toggles the boolean property showMoreText that we use in the template to show or hide text.

When the above component is included in about-us template, it should present a brief text, followed by the Show More button. When you click the Show More button, the rest of text appears and the Show Less button appears, which, when clicked on, should hide the text.

The long-text component being used at the about-us page showing only limited text, followed by the Show More button

Clicking Show More shows more text on the screen along with the Show Less button to rollback