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

Question

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 1

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

Answer 2

Since the accepted answer doesn't actually help to solve the problem, here is a solution.

A better way to achieve this is by creating a directive, this way you can add the directive to any element you wish, and the listeners will only trigger for this particular element.

For example:

@Directive({    selector: "[focus-out-directive]" }) export class FocusOutDirective {    @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>();     @HostListener("focusout", ["$event"])    public onListenerTriggered(event: any): void {        this.onFocusOut.emit(true);    } } 

Then on your HTML elements you wish to apply this listener to, just add the directive selector, in this case focus-out-directive, and then supply the function you wish to trigger on your component.

Example:

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>