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.

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