How to user HostListener for custom elements? ( angular 2)

Question

I can use HostListener for document listening:

@HostListener('document:click', ['$event'])
someAction(event) {
    console.log('done');
}

How can I listen for click events for elements. For example:

<span class="someClass"></span>

Answer 1

@HostListener('click', ['$event']) is to listen for events on the host element itself. There is no other use case they can be used for.

One exception are global events like you used with global event targets like window: , document: , or body .

To listen on arbitrary elements use

<span class="someClass" (click)="someAction($event)"></span>

Answer 2

The answer of Gunter is correct, but you can make a Directive with a HostListener for more global sense of use (like a favorite/like button).

@Directive({
selector: '.favorite'
})
class FavoriteDirective(){
 @HostListener('click', ['$event.target']) onClick(_element) {
    ...
  }
}