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

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

Import {Directive, Hostlistener, hostbinding, Input} from '@angular/core'; @Directive ({selector:'[clickable]'}) Exportclassclickabledirective {@Input ('clickable') text; @HostBinding ()GetInnerText () {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