RxJS Challenge #5: Making a countdown

Timer related tasks are perfect candidates for RxJS solution. Let’s assume we have a confirmation code page where we must enter some code that was sent to us. Those typically have a countdown and when it’s done we get a “Resend code” button. This is what we will try to do in Day 5 of our challenge. Don’t forget to try it yourself with this StackBlitz boilerplate before reading the solution!

Making it work

Fist we make a traditional Subject<void> that we will use to trigger our stream with a button. Next thing we’ll do is switchMapTo an actual countdown stream. Let’s isolate it to a function:

We have timer as our generator. First argument of 0 makes it fire the value instantly. Second argument of 1000 causes it to repeat every second. This is basically an interval that starts immediately. The value it emits is the index of emission. We use it with the map operator to subtract from initial time given to the factory function.

map operator actually receives a second argument which is index, so even…