EmberJS - Template Modifier Keys

You can allow modifier keys along with the {{action}} helper by using the allowedKeys option. Sometimes the {{action}} helper discards the click events with pressed modifier keys. Therefore, the allowedKeys option specifies, which keys should not be ignored.

Syntax

<button {{action 'action-name' allowedKeys = "alt"}}></button>

Example

The example given below shows usage of allowedKeys option on the {{action}} helper. Create a new component and name it as post-action.js with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      //toggling the text
      toggleBody: function () {
         this.toggleProperty('isShowing');
      }
   }
});

Open the post-action.hbs file created under app/templates/ with the following code −

<button {{action "toggleBody" on = 'click' allowedKeys = "alt"}}>{{title}}</button>
{{#if isShowing}}
<h2>Welcome to TutorialsPoint</h2>
{{/if}}
{{outlet}}

Now open the application.hbs file created under app/templates/ with the following code −

{{post-action title = "Click Me"}}
{{outlet}}

Output

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

Now you click on the button, the {{action}} helper triggers along with the allowedKeys option to allow the modifier keys −