Often, in an application, we'll need to allow interaction with controls that affect the application state. To accomplish this, we'll use actions.
The {{action}}
helper is used on HTML elements to send actions back to the template's corresponding controller or component when the user clicks on an element. Let's take a look at an example of this.
Create a new project, navigate to the root of the
application
directory, and type this command to generate a new component:$ ember g component action-component
Keep in mind that all components must have a dash in their names. This will generate the component template, JavaScript files, and test files.
Edit the
action-component.js
file in thecomponents
folder. We'll add the action,toggleTex
t:// app/components/action-component.js import Ember from 'ember'; export default Ember.Component.extend({ showText: true, actions: { toggleText(){ this.toggleProperty('showText'); } } });
In this example,...