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.
Adding more RxJS Operators
We can add more RxJS operators in the mix. Following is updated code which performing some filtering and adding delay using RxJS:
Property Binding
We can also use property binding as follows
So, we have defined a property name coordinates which is updated when mouse is moved. This property can be now bound to HTML elements as follows:
and the output is as follows
Summary
This was a simple and short example of RxJS usage. Till next time, Happy Coding.