Blog

You can implement the action on the parent component by calling its specified action method and creating 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 Adglob...</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}} 

Previous Page:-Click Here