title: Angular2 on focus event to add class
body: <p>I'm looking to update an Angular 1 app to Angular 2 and am having an issue with one of my old directives.</p>
  
  <p>The idea is simple. When an input field is focused a class should be added (md-input-focus) and another be removed (md-input-wrapper). Then this process should be reversed on "blur" event - i.e. focus lost.</p>
  
  <p>My old directive simply included the lines</p>
  
  <pre><code>.directive('mdInput',[
      '$timeout',
      function ($timeout) {
          return {
              restrict: 'A',
              scope: {
                  ngModel: '='
              },
              link: function (scope, elem, attrs) {
                  var $elem = $(elem);
                  $elem.on('focus', function() {
                        $elem.closest('.md-input-wrapper').addClass('md-input-focus')
                  })
                  .on('blur', function() {
                   $(this).closest('.md-input-wrapper').removeClass('md-input-focus');
                  })
               }
  </code></pre>
  
  <p>etc...</p>
  
  <p>I obviously have the classic start to my directive but have run out of.....skill</p>
  
  <pre><code>import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
  
  @Directive({
        selector: '.mdInput',
  
  })
  
  export class MaterialDesignDirective {
        constructor(el: ElementRef, renderer: Renderer) {
             // Insert inciteful code here to do the above
        }
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The HTML would look like (before the input element was focused):</p>
  
  <pre><code>&lt;div class="md-input-wrapper"&gt;
     &lt;input type="text" class="md-input"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>&lt;div class="md-input-wrapper md-input-focus"&gt;
     &lt;input type="text" class="md-input"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>after.</p>
  
  <p>The input element is the only one which can receive a focus event (and therefore the target for the directive) however the parent <code>&lt;div&gt;</code> requires the class addition and removal.</p>
  
  <p><strong>Further help</strong></p>
  
  <p><a href="https://embed.plnkr.co/vXMf2wGRsjg5MCJmPrGY/" rel="noreferrer">Please see Plunker for help/explanation</a> - would be great if someone could help</p>