twiddle

controllers.application.js

import Ember from 'ember';
 
export default Em.Controller.extend({
  userName: null,
  prettyUserName: function() {
    return this.get('userName') ? this.get('userName') : 'everyone';
  }.property('userName')
});

templates.application.hbs

<h1>Ember demos for {{controller.prettyUserName}}</h1>
{{input value=controller.userName  placeholder="Your name"}}
{{#big-red-text}}All the pretty magic happens in your browser{{/big-red-text}}
{{outlet}}

templates.components.big-red-text.hbs

<h1 style="color:green;">{{yield}}</h1>