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.

score 85 · Accepted Answer · edited Jan 30 '19 at 14:52

85

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

edited Jan 30 '19 at 14:52

ryanm

2,239
21
31

answered Feb 01 '17 at 03:41

Garth Mason

7,611
3
30
39

11

But this would be for the host (the element the directive is applied to) but not for the children elements... how do you listen to children? (like in his case? or imagine having 2...
Click Here 1 Click Here 2
) ? – DS_web_developer Apr 10 '17 at 13:26

How to handle click events with @Directive?

1 Answers1