- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
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 −