Implementing Action and Designing Child Component

You can implement the action on the parent component by calling its specified action method and create a logic in the child component for the specified action method.

Syntax

The action can be implemented as given below −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //code here
      }
   }
});

The child component can be implemented as in the following line of code −

<tag_name {{action "action_name"}}>{{Text Here}}</end_of_tag>

Example

The example given below specifies implementing action and designing child component in your application. Create a component with the name ember-actions and open the component template file ember-actions.js created under app/components/ with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.decrementProperty('isShowingBody');
      },
      cancelBody() {
         this.incrementProperty('isShowingBody');
      }
   }
});

Open the ember-actions.hbs file created under app/templates/components/ and enter the following code −

<button {{action "toggleBody"}}>{{title}}Show (Display Text)</button>
{{#if isShowingBody }}
   <h2>Welcome to Tutorialspoint...</h2>
{{/if}}
<button class="confirm-cancel" {{action "cancelBody"}}>{{title}}Hide (Hides Text)
</button>
{{yield}}

Create the application.hbs file and add the following code −

{{ember-actions}}
{{outlet}} 

Output

Run the ember server; you will receive the following output −

When you click on the 'Show' button, it will display the text and hides the text on clicking the 'Hide' button −