Subscribing to a component mouse move event

Question

I found code to subscribe to mouse move in documents, how can I subscribe to only the component instead?

ngOnInit() {
  this.subscription = 
       fromEvent(document, 'mousemove')
                         .subscribe(e => {
                           console.log(e);
                         });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Answer 1

Use ElementRef

ElementRef grants direct access to the host DOM element through its nativeElement property.

constructor(private ele: ElementRef ){
    const host = fromEvent(this.ele.nativeElement,'click').subscribe(c=>console.log(c));
}

Example:https://stackblitz.com/edit/angular-z5y6sq

Ref:https://angular.io/guide/attribute-directives