Getting Mouse Position using RxJS

Photo by Shane on Unsplash

Introduction

This will be a short post just to demo some basic event capturing using RxJS.

Requirement

We want to capture mouse coordinates on the screen and use those values to move a shape around. You can use it for other effects as fit for your requirements.

Code

HTML

First lets define a draw a circle on web-page using following markup and CSS

RxJS

now in corresponding component file, add following code

Code is pretty much self explanatory. Let me know if you have some questions.

With this in-place, we can run the application and check the output.

Output

Now, if we move the mouse on screen, the circle will move along and we can also see the x,y values in the console.