Angular 2+, how to dynamically bind and unbind to mousemove event

Question

I know how to bind to events using the HostListener decorator like this:

  @HostListener('document:mousemove', ['$event'])
  onMousemove(event) {
    //Some code on mouse movement.
  }

But I would like to be able to bind and unbind to the mousemove event intermittently throughout the lifecycle of a component. I don't know what this type of binding is called, and I can't find anything about it. Should I try to use native JavaScript event binding?

You can only unbind yourself if you register imperatively. If you use the declarative approach, there is no way to do that. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 28, 2017 at 6:35

Yoav Schniederman · Accepted Answer · 2017-02-28 06:06:23Z

1

HTML:

<div (mouseover)="someOverFunction()" 
     (mouseleave)="someLeaveFunction()">
         <span *ngIf="mouseOverDiv == true">hello mouseover</span>
         <span *ngIf="mouseOverDiv == false">hello mouseleave</span>
</div>

TS:

mouseOverDiv : boolean = false;

someOverFunction(){
 this.mouseOverDiv = true;  
}

someLeaveFunction(){
 this.mouseOverDiv = false;  
}

answered Feb 28, 2017 at 6:06

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

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

Comments

raj m · Accepted Answer · 2017-02-28 05:00:35Z

0

Define a output variable like below.

 @Output() mouseEvent = new EventEmitter();

Use this variable when you want to emit the event like below.

 this.mouseEvent.emit({value:paramValue});

Call that mouse event where you want to add in html element

 <HTMLElement (mouseEvent) = "methodName()"></HTMLElement>

answered Feb 28, 2017 at 5:00

raj m

2,0136 gold badges23 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular 2+, how to dynamically bind and unbind to mousemove event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related