Angular2, HostListener, how can I target an element? can I target based on class?

GWorking picture GWorking · Jan 17, 2017 · Viewed 59.5k times · Source

In Angular2, how can I target an element within the HostListener decorator?

@HostListener('dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('document: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement.myClass: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

The two first work. Any other thing I've tried raises an EXCEPTION: Unsupported event target undefined for event dragstart

So, can I implement it to a targeted element? How?

Answer

Günter Zöchbauer picture Günter Zöchbauer · Jan 17, 2017

@HostListener() only supports window, document, and body as global event targets, otherwise it only supports the components host element.