[Angular Directive] 3. Handle Events with Angular 2 Directives

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

import {Directive, HostListener, HostBinding, Input} from ‘@angular/core‘;

@Directive({
  selector: ‘[clickable]‘
})
export class ClickableDirective {
  @Input(‘clickable‘) text;
  @HostBinding() get innerText() {
    if(this.text) {
      return this.text;
    }
  }
  @HostListener(‘click‘, [‘$event‘]) onClick(event) {
    console.log(event); //MouseEvent
    this.text = event.clientX;
  }
}

We can add HostListener on the host element, and get ‘$event‘ pass to our handler function ‘onClick‘. Inside the function we are able to change the innerText of the directive.