What's the second argument to HostListener for and why is it often given as ['$event']?

user_1709587 0
Viewed 7339

Angular's HostListener decorator takes two arguments. The first specifies the name of event to listen for. The second is an optional array of strings unilluminatingly named args. Naturally, its meaning isn't currently explained in the docs (which currently devote an entire four words to documenting the HostListener decorator, the first two of which state that it is, uh, the "HostListener decorator").

I've only ever seen HostListener called in two ways:

  1. Omitting the args argument entirely (e.g. at https://angular.io/guide/styleguide#style-06-01)
  2. Specifying the args argument as ['$event'], e.g. at https://angular-2-training-book.rangle.io/handout/advanced-angular/directives/listening_to_an_element_host.html

What does this mysterious args parameter do, and why is it sometimes specified as ['$event']?

angular javascript
2 Answers

$event is the reserved name for the actual event value like it can be used in (click)="clickHandler($event)" event bindings.

@HostListener('eventName', args) supports an array of values like

['$event.target.value', '$event.name']

that specifies what values will be passed as parameters to the event handler.

It looks like just always passing $event (assuming ['$event'] as default) would be a more reasonable approach,
but if WebWorker is used, this way the amount of data passed between UI thread and WebWorker thread can reduced by only passing that part(s) of the event that are actually required by the event handler (or no value at all if the parameter is omitted).

See also https://angular.io/api/core/HostListener#args

user_2174080

it's the event :)

normal Javascript

<div></div>

 div.addEventListener('click', function($event) {
    console.log($event);
  })

All the javascript native events, like keyup or click, they're all asynchronous events and when they happen, you can listen to them ( add a listener in Javascript, or a HostListener or event binding in Angular) and then in your function which you are passing to be called when the event is happening, you can catch that Event, which is basically a Javascript object which is holding information about the source of the event and all the other things related to the event.

The same thing can be done in Angular:

 @HostListener('click', ['$event']) myFunction(theEvent) {
    console.log("$event is ", theEvent); // 
  }

$event is an optional parameter and if you're not interested, you're not forced to add it to your parameters.

As I said $event holds all the information about the actual event, like the name of it, the source of it, if it was a keyup event, the pressed key and all the other things, that means you can get all those extracted from the Event:

@HostListener('click', ['$event.target.id']) myFunction(buttonId) {
    console.log("buttonId ",buttonId); // 
  }

or you can

 @HostListener('click', ['$event']) myFunction(event) {
    console.log("buttonId ",event.target.id); // 
  }

The other syntax in Angular is :

 <button (click)="myFunction($event)">

Or in normal javascript you can say :

 document.querySelector('button').addEventListener('click',($event)=>{
    console.log('the event is',$event);
})

The HostListener can also be written in the @Component decorator if you don't like to use the @HostListener decorator to be used ( although why wouldn't you?)

@Component({
   selector:"my-component",
   host:{
    '(click)':'myFunction($event)'
   }
})
user_31988040
Related