ng2-focus-forward-directive

focus.forward.directive.ts

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

@Directive({
  selector: 'input'
})
export class InputFocusForwarderDirective {

  constructor(private elRef: ElementRef, private renderer: Renderer) {
  }

  @HostListener('focus') onFocus() {
    this.renderer.invokeElementMethod(this.elRef.nativeElement,
      'dispatchEvent',
      [new CustomEvent('input-focus', {bubbles: true})]);
    // or just
    // el.dispatchEvent(new CustomEvent('input-focus', { bubbles: true }));
    // if you don't care about webworker compatibility
  }

  @HostListener('focusout') onFocusOut() {
    this.renderer.invokeElementMethod(this.elRef.nativeElement,
      'dispatchEvent',
      [new CustomEvent('input-focus-out', {bubbles: true})]);
    // or just
    // el.dispatchEvent(new CustomEvent('input-focus', { bubbles: true }));
    // if you don't care about webworker compatibility
  }
}

@Component({
  selector: 'my-component',
  template: `
<form>
  <input type="text">
</form>`
}) {
  @HostListener('input-focus', ['$event.target']) onInputFocus(target) {
    console.log('FOCUS', target);
  }

  @HostListener('input-focus-out', ['$event.target']) onInputFocusOut(target) {
    console.log('FOCUSOUT', target);
  }
}