New Twiddle

components.tharp-component.js

export default Ember.Component.extend({
  classNames: ['tharp-component'],
  firstName: 'Daniel',
  lastName: 'Tharp'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  amIVisible: true,
  buttonText: Ember.computed('amIVisible', function () {
    return this.get('amIVisible') ? 'Hide' : 'Show';
  }),
  actions: {
  	toggle() {
      this.toggleProperty('amIVisible');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1><br><br>

{{tharp-component}}

{{tharp-component firstName='Jordan' lastName='Hawker'}}

<button {{action 'toggle'}}>{{buttonText}} Me</button>

{{tharp-component isVisible=amIVisible firstName='Monkey'}}

templates.components.tharp-component.hbs

<div>
	My name is {{firstName}} {{lastName}}, I am awesome.
</div>