How to detect if mouse left the window in Angular way?

Question

I want to detect if the mouse left the browser window and not just a specific div therefore not using the (mouseleave) etc. methods in HTML. Is there a way?

UPDATE:

ParentComponent:

<div class="parent" (dragover)="openDialogComponent()"></div>

@HostListener('window:dragleave') onMouseLeave() {
    console.log('leave window?');
}

What actually happens: When files are dragged over ParentComponent, DialogComponent opens. When files are dragged over DialogComponent, it closes because it left ParentComponent area thus giving a flickering effect on the popup.

What I want to happen: How do you close DialogComponent when mouse leaves both Parent and Dialog components, or in other words, when mouse/drag events leave the BROWSER/WHOLE WINDOW?

Angela Amarapala · Accepted Answer · 2020-02-03 05:49:00Z

0

You can use HostListener for this,

@HostListener('window:mouseleave', ['$event.target']) onMouseLeave() {
    // do something
}

The key is the DOM event that the directive listens to. To listen to global events, add the target to the event name. The target can be window, document or body.

Refer the Official Documentation.

edited Feb 3, 2020 at 5:49

answered Feb 3, 2020 at 5:35

Angela Amarapala

1,07210 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Char Over a year ago

but doesn't it only work for components and not the window as a whole?

Angela Amarapala Over a year ago

For global events, give the target in the hostlistener. Please have a look at the updated answer.

ytan11 Over a year ago

@AngelaAmarapala It does not work when I give the window target in the hostlistener but work if I did not

Collectives™ on Stack Overflow

How to detect if mouse left the window in Angular way?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related