Auto-size

components.my-component.js

import Ember from 'ember';

export default Ember.TextArea.extend({
_previousHeight: 0,
didInsertElement() {
this._super(...arguments);
this.input();
},
input() {
	let element = this.element;
	let height = element.style.height;
	let scrollHeight = parseInt(element.scrollHeight || 0, 10);

			if (height != scrollHeight) {
				element.style.height = 'auto';
		  	element.style.height = (element.scrollHeight) + 10 + 'px';
		  }
}
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'auto-size',
	value: `On the left side of each page in the Guides is a table of contents, organized into sections that can be expanded to show the topics they cover. Both the sections and the topics within each section are ordered from the most basic concepts to the more advanced.
`
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component value=value}}
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}