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

ani5ha · Accepted Answer · 2016-12-23 11:20:37Z

7

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)

answered Dec 23, 2016 at 11:20

ani5ha

3964 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C.M. Over a year ago

Thanks, I used this in 2019. You don't need to declare el, there's already a private instance variable called _el due to the parameter in the constructor having the private keyword. Also, Renderer is deprecated in favor of.... Renderer2.

Günter Zöchbauer · Accepted Answer · 2016-12-23 11:22:49Z

5

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.

edited Dec 23, 2016 at 11:22

answered Sep 2, 2016 at 6:13

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

4 Comments

javascript novice Over a year ago

I need the whole div to be focussed, not just the input: My html is this: <div class="tn icon-icon_Edit" [class.tn-focus]='inputFocusClass'> <input > <div class="tn-icon-hintText">{{iconBoxTextfieldConfig.hintText}}</div> </div> ------ So I cant just put the focus on the input bout on the entire div. That is the part that wont work. thanks for pointing out the type

Günter Zöchbauer Over a year ago

Ok, seems I misinterpreted your question a bit. You can move the (focus)="..." and (blur)="..." to the div. You need to set tabindex="0"` otherwise a <div> can't receive the focus.

javascript novice Over a year ago

The focus doesnt seem to work when I click on the div (Image 1. when I click on div, it shows this). Once I click on the div and then move the cursor away from it, the style gets applied. I am wondering if focus is the right thing to use.

Günter Zöchbauer Over a year ago

I don't have done much with focus on custom elements but AFAIK from seeing it mentioned elsewhere, this should work just fine. Perhaps you can create a Plunker to reproduce and investigate (use then Plunker template from the "live example" link in angular.io/docs/ts/latest/quickstart.html)

Collectives™ on Stack Overflow

Angular2 input component Add class on focus

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related