angular - Angular2 input component Add class on focus -

i trying create input text field using anuglar 2 should image below on foucs:

i have class .tn_blue want added div (in bold below) when element in focus.

i not able bind focus using host on component:

my ts code:

import {component, elementref, renderer, input, oninit} '@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 ")       }     elementref: elementref;    constructor(private el: elementref,  public renderer: renderer) {     this.elementref = el;   }    ngoninit(){        this.inputfocusclass = true;   }   } 

html code:

<div class="tn-formfield" *ngif="iconboxtextfieldconfig">   <div class="tn-inline tn-label">       <span *ngif="iconboxtextfieldconfig.isrequired" class="tn-asterisk">*</span>       <span class="tn-label">{{iconboxtextfieldconfig.label}}:</span>   </div>   **<div class="tn icon-icon_edit" [class.tn-focus]:'inputfocusclass'>       <!-- <span  class="tn icon-icon_edit"></span> -->       <input [style.width] = "iconboxtextfieldconfig.width" class="tn-icon-textfield" [disabled]="iconboxtextfieldconfig.isdisabled">       <div class="tn-icon-hinttext">{{iconboxtextfieldconfig.hinttext}}</div>   </div>** </div> 

scss code

.tn_focus {   outline:1px solid blue;   border: none;   color:#fff;   background-color: blue; } 

any suggestions appreciated

import { directive, elementref, hostlistener, input, renderer } '@angular/core'; @directive({     selector: '[onfocus]', }) export class onfocusdirective {     private el: elementref;     constructor(private _el: elementref, public renderer: renderer) {         this.el = this._el;     }      @hostlistener('focus', ['$event']) onfocus(e) {         this.renderer.setelementclass(this._el.nativeelement, 'tn_focus', true);         return;     } @hostlistener('blur', ['$event']) onblur(e) {         this.renderer.setelementclass(this._el.nativeelement, 'tn_focus', false);         return;     }   } 

use directive onfocus on element (on want add class)