EmberJS - Sending Actions

You can use event handlers to send actions from component to your application.

Syntax

{{comp_name action = "name_of_action"}}

Example

The example given below specifies sending actions from components to your application. Create a component with the name comp-yield and open the component template file comp-yield.js created under app/components/ with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Hello...Welcome To Tutorialspoint...");
         
         //sendAction() method sends the specified action when the component is 
            used in a template
         this.sendAction();
      }
   }
});

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

<h2>Sending Actions to a Component</h2>
<input type = "button" value = "Click Here" {{action "compFunc"}} /><br/>
<p><b>{{title}}</b></p>
{{yield}}

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

{{comp-yield title = title action = "compFunc"}}
{{outlet}} 

Output

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

When you click on the button, it will display the text as shown in the screenshot below −