How can I write a global event listener in Angular 4?

Question

I want to write below code that is in jQuery into Angular 4.

jQuery code is working fine for all text box in app but want to make same thing in angular which run for all input-text control.

Difficulties are

• Write common event listener in angular 4.
• Manipulate or traverse parent or sibling element in angular 4.

Thanks in advance.

$(document).on('focus ', ".mask-text input[type='text'], .mask-text input[type='password']", function (e) {
            $(this).parents(".mask-text").addClass("focused");
        });
        $(document).on('blur ', ".mask-text input[type='text'], .mask-text input[type='password'] ", function (e) {
            if ($(this).val() == undefined) {
                $(this).parents(".mask-text").removeClass("focused");
            }
        });

Answer 1

Looks like you are new to Angular 4.

Create a file called InputFocus.directive.ts

paste the below code in it.

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
 selector: '.mask-text input[type="text"]'
 })
export class HighlightDirective {

   constructor(private el: ElementRef) { 
   }

  @HostListener('focus') onFocus() {
    var cName = this.el.nativeElement.parentElement.className;
    if(cName.indexOf('focused') === -1){
      this.el.nativeElement.parentElement.className += " focused"; 
    }
  }

  @HostListener('blur') onBlur() {
    var data = this.el.nativeElement.value;
    if(!data){
      this.el.nativeElement.parentElement.className = this.el.nativeElement.parentElement.className.replace('focused', '');  
    } 
  }
}

You must import this in your app root file. Generally will be app.ts

import {HighlightDirective} from './InputFocus.directive'

See to it that the path is right.

Now find @NgModule and add HighlightDirective in your Module. See below code. Do not copy everything, just add the HighlightDirective in declarations.

eg

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App,
  HighlightDirective
  ],
  bootstrap: [ App ]
})

This should work.

See the Demo Example