Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 Can I pass custom parameters to Host Listener event

Tags:

angular

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);
 }
like image 503
Dino Avatar asked Mar 22 '17 16:03

Dino


1 Answers

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

like image 121
yurzui Avatar answered Oct 13 '22 03:10

yurzui