CODEWITHSUNDEEP
angular
Dino
Dino

Reputation: 8292

Angular2 Can I pass custom parameters to Host Listener event

Here is my current Host Listener

 @HostListener('document:myCustomEvent', ['$event'])
 updateNodes(event) {
    console.log(this.variable);
 }

And I'm calling it here:

var event = document.createEvent("CustomEvent");
event.initCustomEvent('myCustomEvent', true, true,
  true);

document.dispatchEvent(event);

My question is, can I pass my custom parameters to updateNodes ? For instance: 

@HostListener('document:myCustomEvent', ['$event'])
updateNodes(event, param1, param2) {
 console.log(this.variable);
 console.log(param1);
 console.log(param2);
 }

Upvotes: 6

Views: 10566

Answers (1)

yurzui
yurzui

Reputation: 214175

Dispatch event this way:

var event = new CustomEvent(
    'myCustomEvent',
    { detail: { 'param1': 1, 'param2': 2 } }
);

document.dispatchEvent(event);

and then

@HostListener('document:myCustomEvent', ['$event', '$event.detail.param1', '$event.detail.param2'])
updateNodes(event, param1, param2) {
    console.log(param1);
    console.log(param2);
}

Plunker Example

Upvotes: 16

Related Questions