title: Angular2 input component Add class on focus
body: <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>