Angular2 input component Add class on focus

Question

I am trying to create an input text field using Anuglar 2 which should look like the image below on foucs:

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

I am not able to bind the focus using host on component:

My ts 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;
  }


}

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 would be greatly appreciated

Answer 1

import { Directive, ElementRef, HostListener, Input, Renderer } from '@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 this directive onFocus on element (on which you want to add class)

Answer 2

This seems to be a typo

[class.tn-focus]:'inputFocusClass'

should be

[class.tn-focus]='inputFocusClass'

besides that this should do it

  <input 
      (focus)="inputFocusClass = true"
      (blur)="inputFocusClass = false; null"
      [style.width] = "iconBoxTextfieldConfig.width" class="tn-icon-textfield" [disabled]="iconBoxTextfieldConfig.isDisabled">

The ; null is required for inline code that results to false (inputFocusClass = false) because that would result in preventDefault() being called on the event. The additional ; null just changes the return value from the expression to null. The return value true in the (focus) event handler doesn't have any effect because it's the default behavior.