RxJS Challenge #11: Auto-close notification

This time we have a toast notification. It’s a widespread pattern to show some complementary information in a small alert that disappears after some time. We are going to improve the UX by making them stick while user hovers over the message with a cursor. Let’s go!

Making a stream in 3 steps

You can try to solve this puzzle yourself using this StackBlitz boilerplate first.

1 Since we need to close a notification in a given time, it’s natural to start with timer function. Without a second argument it would just emit once after set delay and complete.

2 We need to break this timer if user hovers over the notification. This is a job for takeUntil operator and a fromEvent stream.

3 Whenever user moves the cursor away we want to restart the timer. We can achieve this with a repeatWhen operator that uses a stream of mouseleave events as a trigger.

repeatWhen is like repeat but it allows us to conditionally restart our stream on particular event

Now we need to call the close method if the stream comes through. We could subscribe and do it manually but then we would need to take care of subscription. Let’s use a little trick here instead. We…