RxJS challenge #10: color picker palette
Published in
3 min readApr 5, 2021
There are a color picker palette and a circle inside it. The task is to make an RxJS stream to allow a user to drag a circle inside the palette and choose another color. And there is also an extra task: show the HEX code of selected color under the palette.
See the whole task and case here:
https://stackblitz.com/edit/rxjs-challenge-10
My solution to the first task
First of all we need to get a DOM element of the palette to send it into the reactive world:
The trick is simple: we get DOM element with ViewChild and handle it with a setter to next it into Subject. This target$$ subject can be piped to the Observable with shareReplay(1) to let other streams get our palette later.
The next step is making event streams that will emit when some DOM event happens:
