A simple angular directive to expand input field

auto-grow.directive.ts

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

@Directive({
  selector: '[autoGrow]',
  host: {
    '(focus)' : 'onFocus()',
    '(blur)' : 'onBlur()'
  }
})
export class AutoGrowDirective {

  constructor(
    private el: ElementRef, 
    private render: Renderer
  ) { }

  onFocus(){
    this.render.setElementStyle(this.el.nativeElement, 'width', '300');
  }

  onBlur(){
    this.render.setElementStyle(this.el.nativeElement, 'width', '150');
  }

}