Angular2 input component Add class on focus
<p><a href="https://i.stack.imgur.com/XnMNF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XnMNF.png" alt="enter image description here"></a>I am trying to create an input text field using Anuglar 2 which should look like the image below on foucs:<a href="https://i.stack.imgur.com/hoiJY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hoiJY.png" alt="enter image description here"></a></p>

<p>I have a class .tn_blue that I want to be added to the div (in bold below) when the element is in focus.</p>

<p>I am not able to bind the focus using host on component:</p>

<p>My ts code:</p>

<pre><code>import {Component, ElementRef, Renderer, Input, OnInit} from '@angular/core';


@Component({
  selector    : 'my-textfield',
  templateUrl : 'path-to/textfield.component.html',
  styleUrls   : ['path-to/textfield.component.css'],
  host: {
      '(focus)':'_setInputFocus(true)',
      }
})

export class Textfield implements OnInit{

  @Input() iconBoxTextfieldConfig:any;

  inputFocusClass: boolean;

      _setInputFocus(isFocus:boolean) {
        this.inputFocusClass = isFocus;
        console.log("he he he ")
      }


  elementRef: ElementRef;

  constructor(private el: ElementRef,  public renderer: Renderer) {
    this.elementRef = el;
  }

  ngOnInit(){

      this.inputFocusClass = true;
  }


}
</code></pre>

<p>HTML code:</p>

<pre><code>&lt;div class="tn-formfield" *ngIf="iconBoxTextfieldConfig"&gt;
  &lt;div class="tn-inline tn-label"&gt;
      &lt;span *ngIf="iconBoxTextfieldConfig.isRequired" class="tn-asterisk"&gt;*&lt;/span&gt;
      &lt;span class="tn-label"&gt;{{iconBoxTextfieldConfig.label}}:&lt;/span&gt;
  &lt;/div&gt;
  **&lt;div class="tn icon-icon_Edit" [class.tn-focus]:'inputFocusClass'&gt;
      &lt;!-- &lt;span  class="tn icon-icon_Edit"&gt;&lt;/span&gt; --&gt;
      &lt;input [style.width] = "iconBoxTextfieldConfig.width" class="tn-icon-textfield" [disabled]="iconBoxTextfieldConfig.isDisabled"&gt;
      &lt;div class="tn-icon-hintText"&gt;{{iconBoxTextfieldConfig.hintText}}&lt;/div&gt;
  &lt;/div&gt;**
&lt;/div&gt;
</code></pre>

<p>scss code</p>

<pre><code>.tn_focus {
  outline:1px solid blue;
  border: none;
  color:#FFF;
  background-color: blue;
}
</code></pre>

<p>Any suggestions would be greatly appreciated</p>