The {{action}} helper class is used to make the HTML element clickable and actions will be forwarded to the application when the user clicks an event.
Syntax
<button {{action 'action-name'}}>Click</button>
The above code adds the button Click to your application in which the action will be forwarded to the specified action method when a user clicks the button.
The following table lists down the action events of actions along with their description −
| S.No. | Action Events & Description |
|---|---|
| 1 | Action Parameters The arguments can be passed to an action handler with the help of {{action}} helper. |
| 2 | Specifying the Type of Event The alternative event can be specified on {{action}} helper by using the on option. |
| 3 | Allowing Modifier Keys You can allow modifier keys along with the {{action}} helper by using the allowedKeys option. |
| 4 | Modifying Action’s first Parameter You can modify the action’s first parameter by specifying a value option for the {{action}} helper. |
Example
The example given below shows the usage of {{action}} helper to make the HTML element clickable and action will be forwarded to the specified action method. Create a component with name post-action by using the following command −
ember g component post-action
Open the post-action.js file created under app/component/ and add the following code −
import Ember from 'ember';
export default Ember.Component.extend ({
actions: {
toggleBody() {
this.toggleProperty('isShowingBody');
}
}
});
Open the file post-action.hbs file created under app/templates/ with the following code −
<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3>
{{#if isShowingBody}}
<h2>Welcome To Adglob</h2>
{{/if}}
{{yield}}
In the index.hbs file, copy the below code which is created under app/templates/ −
{{post-action}}
{{outlet}}
Output
Run the ember server; you will receive the following output −
When you click on the Toggle button, it will display the following text from the template file.
Previous Page:-Click Here
Pingback: EmberJS - Template Action Parameter - Adglob Infosystem Pvt Ltd