RxJS & Ng Challenge #6: picking cinema seats

And here is my new RxJS challenge in the really small cinema!

Let users pick seats and count them on selected counter.

Hide seats and show the final cost after user clicks buy button.

Stackblitz to try: https://stackblitz.com/edit/rxjs-challenge-6

Let’s solve it

So, we have ten seats that are actually buttons. And one more buy button that stops selecting and shows us the final sum.

Let’s add selectSeat$ subject with type number

readonly selectSeat$ = new Subject<number>();

The idea is that we can call next of this subject and emit the selected place index every time user picks it. Moreover, we can call complete method by clicking the buy button because we need to switch our interface to showing the final sum.

And with this idea we can build our two streams of data for template:

Well, we have two streams piped from our subject: selectedMessage$ and cost$ .