title: Grow width of input on focus in angular2
body: <p>I am new to angular2, i have an issue with my <strong>input</strong> which has an attribute <strong>autoGorw</strong> it is a custom directive and has two <code>events</code> <strong>(focus) and (blur)</strong>, <code>onFocus()</code> i want to increase the input size and <code>onBlur()</code> i want to decrease the size to its default size, both the <code>events</code> been firing and show results in console, but <code>input</code> size is not increasing, there isn't any error in my console, i don't know what i am missing.</p>
  
  <p><strong>Sorry</strong> i tried in <code>Plunker</code> for live demo to make you easy to understand, but couldn't made one.</p>
  
  <p>Here is my <strong>code</strong></p>
  
  <p><strong>auto-grow.directive.ts</strong></p>
  
  <pre><code>import {Directive, ElementRef, Renderer} from '@angular/core'
  
  // ElementRef =&gt; Gives access to host element
  // Renderer =&gt; Gives access to modify that element
  
  @Directive({
    selector: '[autoGrow]',
    host:{
      '(focus)' : 'onFocus()',
      '(blur)' : 'onBlur()'
    }
  })
  export class AutoGrowDirective{
  constructor(private el : ElementRef, private renderer : Renderer){       
  }    
  onFocus(){
      console.log("Triggered !"); // its working upto this line.
      this.renderer.setElementStyle(this.el.nativeElement,'Width','500');
  }
  onBlur(){
      this.renderer.setElementStyle(this.el.nativeElement,'Width','120');
   }
  }
  </code></pre>
  
  <p><strong>courses.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core'
  import {AutoGrowDirective} from './auto-grow.directive'
  
  @Component({
    selector:"courses",
    template:`
    &lt;h2&gt;This is Courses component&lt;/h2&gt;
    &lt;p&gt;{{ title }}&lt;/p&gt;
    &lt;input type="text" autoGrow /&gt;
    `,
    directives: [AutoGrowDirective] 
  })
  
  export class CoursesComponent{
    title = 'This is the title of Courses Page!';
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {CoursesComponent} from './courses.component';
  
  @Component({
    selector: 'my-app',
    template: '&lt;h1&gt;Hello Angular!&lt;/h1&gt;&lt;courses&gt;&lt;/courses&gt;',
    directives:[CoursesComponent]
  })
  export class AppComponent { }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <p>In html inside body i have the <strong>selector</strong></p>
  
  <pre><code>&lt;my-app&gt;Loading Please wait...&lt;/my-app&gt;
  </code></pre>