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

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

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)'/>

I think better way for global listener is @hostliterner but if you want to target some element you can do like this

<div (event)="onEvent($e)"></div>

in your angular component

onEvent($e) { //do something ... }