How to handle click events with @Directive?

Question

Is it possible to attach click events to the element on or within a @Directive (not @Component)?

For example, I have a @Directive defined as follows:

import { Directive, OnInit, Input, ElementRef, Renderer } from '@angular/core'; declare var $: any; // JQuery  @Directive({     selector: '[gridStack]' }) export class GridStackDirective implements OnInit {     @Input() w: number;     @Input() animate: boolean;      constructor(         private el: ElementRef,         private renderer: Renderer     ) {         renderer.setElementAttribute(el.nativeElement, "class", "grid-stack");     }      ngOnInit() {         let renderer = this.renderer;         let nativeElement = this.el.nativeElement;         let animate: string = this.animate ? "yes" : "no";          renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));         if(animate == "yes") {             renderer.setElementAttribute(nativeElement, "data-gs-animate", animate);         }          let options = {             cellHeight: 80,             verticalMargin: 10         };          // TODO: listen to an event here instead of just waiting for the time to expire         setTimeout(function () {             $('.grid-stack').gridstack(options);         }, 300);     }  } 

In the HTML, where I use that @Directive (in index.html), note that I do not have any template associated with the @Directive itself, can I include a click event?:

<div gridStack>     <div><a (click)="clickEvent()">Click Here</a></div> </div> 

I know this works if it is a @Component, but am looking to try to get it working with a @Directive if it is possible.

Answer 1

You can attach to the click event via HostListener decorator in your directive definition. For example:

@Directive({ selector: '[coolBehavior]' }) export class CoolBehaviorDirective {     @HostListener('click', ['$event']) onClick($event){         console.info('clicked: ' + $event);     } } 

See the Angular docs here

And some more info in this question