diff --git a/README.md b/README.md
index 628ebae..10cc6d5 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ import {Autosize} from 'angular2-autosize';
 
 @Component({
   template: `
-    <textarea autosize class="my-textarea">Hello, this is an example of Autosize in Angular2.</textarea>
+    <textarea [autosize]='myTextArea.value' class="my-textarea" #myTextArea>Hello, this is an example of Autosize in Angular2.</textarea>
   `,
   directives: [Autosize]
 })
diff --git a/src/autosize.directive.ts b/src/autosize.directive.ts
index 574070e..63bda43 100644
--- a/src/autosize.directive.ts
+++ b/src/autosize.directive.ts
@@ -1,22 +1,25 @@
-import { ElementRef, HostListener, Directive} from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, SimpleChange, Renderer } from '@angular/core';
 
 @Directive({
     selector: 'textarea[autosize]'
 })
-
 export class Autosize {
- @HostListener('input',['$event.target'])
-  onInput(textArea: HTMLTextAreaElement): void {
-    this.adjust();
+  @Input() autosize: string;
+  
+  constructor(public renderer: Renderer, public element: ElementRef) {
+      this.renderer.setElementAttribute(this.element.nativeElement, 'rows', '1');
   }
-  constructor(public element: ElementRef){
-  }
-  ngAfterContentChecked(): void{
+
+  ngOnChanges(changes: {[key: string]: SimpleChange}) {
     this.adjust();
   }
+  
   adjust(): void{
-    this.element.nativeElement.style.overflow = 'hidden';
-    this.element.nativeElement.style.height = 'auto';
-    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";
+    this.renderer.setElementStyle(this.element.nativeElement, 'overflow', 'hidden');
+    this.renderer.setElementStyle(this.element.nativeElement, 'height', 'auto');
+    let scrollHeight = this.element.nativeElement.scrollHeight;
+    if(scrollHeight > 0) {
+      this.renderer.setElementStyle(this.element.nativeElement, 'height', scrollHeight + 'px');
+    }
   }
-}
+}
\ No newline at end of file