Modifier Forwarding Demo

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked actionClicked = false;
	@tracked onclickClicked = false;
  @tracked onClicked = false;

	@action enable(prop) {
    this[prop] = true;
  }

}

templates.application\.hbs

<p>
  <CoolButton
    {{action this.enable "actionClicked"}}
  >
  	\{{action this.enable "actionClicked"}}
  </CoolButton>
  {{#if this.actionClicked}}clicked!{{/if}}
</p>

<p>
  <CoolButton
    onclick={{action this.enable "onclickClicked"}}
  >
  	onclick=\{{action this.enable "onclickClicked"}}
  </CoolButton>
  {{#if this.onclickClicked}}clicked!{{/if}}
</p>

<p>
  <CoolButton
    {{on "click" (fn this.enable "onClicked")}}
  >
    \{{on "click" (fn this.enable "onClicked")}}
  </CoolButton>
  {{#if this.onClicked}}clicked!{{/if}}
</p>

templates.components.cool-button\.hbs

<button
  style="
    font-family: monospace;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
  "
  ...attributes
>
  <span
    style="
      margin-right: 4px
    "
    aria-hidden
  >
    😎
  </span>
  
  {{yield}}
  
</button>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": false,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.11.1",
    "ember-template-compiler": "3.11.1",
    "ember-testing": "3.11.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}