增加焦点输入的宽度为angular2

我是angular2的新手,我有一个问题,我的输入有一个属性autoGorw它是一个自定义指令,有两个事件(焦点)和(模糊),onFocus()我想增加输入大小和onBlur()我想要将大小减小到默认大小,事件一直在触发并在控制台中显示结果,但输入大小没有增加,我的控制台中没有任何错误,我不知道我缺少什么.

对不起,我在Plunker尝试了现场演示,让你很容易理解,但无法制作一个.

这是我的代码

自动grow.directive.ts

import {Directive,ElementRef,Renderer} from '@angular/core'

// ElementRef => Gives access to host element
// Renderer => 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,'120');
 }
}

courses.component.ts

import {Component} from '@angular/core'
import {AutoGrowDirective} from './auto-grow.directive'

@Component({
  selector:"courses",template:`
  <h2>This is Courses component</h2>
  <p>{{ title }}</p>
  <input type="text" autoGrow />
  `,directives: [AutoGrowDirective] 
})

export class CoursesComponent{
  title = 'This is the title of Courses Page!';
}

app.component.ts

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',template: '<h1>Hello Angular!</h1><courses></courses>',directives:[CoursesComponent]
})
export class AppComponent { }

HTML

在html里面的身体我有选择器

<my-app>Loading Please wait...</my-app>

@Directive({
  selector: '[autoGrow]',})
export class AutoGrowDirective {
  @HostBinding('style.width.px')
  width:number = 120;

  @HostListener('focus')
  onFocus() {
    this.width=500;
  }

  @HostListener('blur')
  onBlur(){
    this.width = 120;
  }
}