RxJS Challenge #01: Tracking focus within page section

Sometimes we need to know whether focus is currently within some region or not. For example, if we try to lock it inside modal or close some dropdown when focus left it. I decided to pick this as my first RxJS challenge I posted on Twitter:

Let’s see how we can solve this puzzle using RxJS! If you want, you can for this StackBlitz boilerplate and try to solve it yourself before reading further.

Level 1

For the first iteration we will assume we only care about whether focus is inside or not. We can add :focus-within CSS selector with some custom style as an indicator. Our RxJS solution must match it.

A good idea would be to isolate all the logic inside an Observable based service. It would then be possible to use it inside a directive or just inject it into a host component that we want to track. We can just extend Observable and implement our logic inside the constructor. Here’s how we can do it: