title: HTML5 event handling(onfocus and onfocusout) using angular 2
body: <p>I have a date field and I want to remove the place holder by default.</p>
  
  <p>I am using javascript <code>onfocus</code> and <code>onfocusout</code> events for removing placeholder.</p>
  
  <p>Can anyone help with using angular2 directive?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput"&gt;
  </code></pre>
  
  <p>I try to solving in this way, but i am getting problem with resetting the input field type.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, Input } from 'angular2/core';
  @Directive({
      selector: '.dateinput', 
      host: {
      '(focus)': 'setInputFocus()',
      '(focusout)': 'setInputFocusOut()',
    }})
  
    export class MyDirective {
        constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}
  
        setInputFocus(): void {
          //console.log(this.elementRef.nativeElement.value);
        }
    }
  </code></pre>