CODEWITHSUNDEEP
angular
Sebastian Olsen
Sebastian Olsen

Reputation: 10888

Delegate event bind angular 2

Is there a way to bind an event to the body, and delegate to a choosen element? For example:

<div (body.mousemove)='foo()'>Move over me.</div>

I need this for a range slider I am creating, the user should be able to move the slider even when their mouse is not inside the element, so I need to bind the actual event to the body.

Upvotes: 1

Views: 680

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658057

This should work:

<div (body:mousemove)='foo()'>Move over me.</div>

Alternatively document and window are supported as global event targets.

You can also use in any element that is added to the DOM

@HostListener('body:mousemove', ['$event'])
onGlobalMouseMove(event) {
  console.log(event);
}

Upvotes: 2

Related Questions