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…