creating elastic text area

Ionic/app/pages/chatPage/chatPage.html

@@ -23,6 +23,7 @@
       <ion-textarea rows="3"
         placeholder="Type to compose"
         ></ion-textarea>
+      <!--elastic-textarea placeholder="Type to compose"></elastic-textarea-->
     </ion-item>
     <ion-buttons right>
       <button style="min-width:45px;">

Ionic/app/pages/chatPage/chatPage.js

@@ -2,10 +2,11 @@ import {Component} from '@angular/core';
 import {NavController, NavParams} from 'ionic-angular';
 
 import {ChatBubble} from '../components/chatBubble/chatBubble';
+import {ElasticTextarea} from '../components/elasticTextarea';
 
 @Component({
   templateUrl: 'build/pages/chatPage/chatPage.html',
-  directives: [ChatBubble]
+  directives: [ChatBubble, ElasticTextarea]
 })
 export class ChatPage {
   static get parameters() {

Ionic/app/pages/components/elasticTextarea.js

@@ -0,0 +1,34 @@
+import {Component, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'elastic-textarea',
+  inputs: ['placeholder'],
+  template:
+  `
+  <textarea #txtArea cols='1'
+    placeholder='{{placeholder}}'
+    (keyup)='expandText()'
+    (keydown)='expandText();'
+    [(ngModel)]="content"
+    (ngModelChange)='onChange($event)'></textarea>
+  `,
+  queries: {
+    txtArea: new ViewChild('txtArea')
+  }
+})
+export class ElasticTextarea {
+  constructor() {
+    this.content = "";
+  }
+
+  onChange(newValue){
+    console.log('new value');
+    console.log(newValue);
+  }
+
+  expandText(){
+    console.log('expand textarea');
+    this.txtArea.nativeElement.style.height = "33px";
+    this.txtArea.nativeElement.style.height =  this.txtArea.nativeElement.scrollHeight + "px";
+  }
+}