Component with re-usable content components

components.my-component.display-part.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-component.edit-part.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    toggleIsEditing() {
      this.toggleProperty('isEditing');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
Non-block invocation:
<br>
{{my-component}}
<br>
<br>
Block invocation:
<br>
{{#my-component as |isEditing|}}
  {{#if isEditing}}
    {{my-component/edit-part}}
  {{else}}
    <div>Completely custom display part!!</div>
  {{/if}}
{{/my-component}}

templates.components.my-component.display-part.hbs

Display!

templates.components.my-component.edit-part.hbs

Edit!

templates.components.my-component.hbs

<button {{action 'toggleIsEditing'}}>Toggle</button>
{{#if hasBlock}}
  {{yield isEditing}}
{{else}}
  {{#if isEditing}}
    {{my-component/edit-part}}
  {{else}}
    {{my-component/display-part}}
  {{/if}}
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}