Ember Issue #15680

components.a-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  
  click() {
    Ember.get(this, 'log')('a component');
  }
});

components.b-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  
  click() {
    Ember.get(this, 'log')('b component');
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  button: 'a-component',
  logs: Ember.A([]),
  
  actions: {
    log(msg) {
      console.log("hola");
      Ember.get(this, 'logs').unshiftObject(msg);
    },
    clear() {
      Ember.set(this, 'logs', Ember.A([]));
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<p>
  The first two buttons change the component rendered for the third button. When clicking on the third button, the name of the component will be logged using an action (newer messages first).
</p>
<br>
{{outlet}}
<button onclick={{action (action (mut button) "a-component")}}>A Component</button>
<button onclick={{action (action (mut button) "b-component")}}>B Component</button>
<br>

{{#component button log=(action "log")}}
  Click me
{{/component}}

<h2>Logs</h2>
<button onclick={{action "clear"}}>Clear logs</button>
<ul>
{{#each logs as |log|}}
  <li>{{log}}</li>
{{/each}}
</ul>
<br>
<br>

templates.components.a-component.hbs

{{yield}}

templates.components.b-component.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "release",
    "ember-template-compiler": "release",
    "ember-testing": "release"
  },
  "addons": {
  }
}