Pause RxJS stream based on a value in the stream

Question

I have a simple component with a single button that starts and pauses a stream of numbers generated by RxJS timer.

import { Component, OnInit } from \'@angul         


        

Answer 1

Here is a simple way to do it. Use the timer() just as an emitter, and increment a count separately. This gives you a little more direct control.

export class AppComponent implements OnInit {
  active = true;
  out$: Observable;

  count = 0;

  ngOnInit(): void {

    const stream$ = timer(500, 500);

    this.out$ = stream$.pipe(
      filter(v => this.active),
      map(v => {
        this.count += 1;
        return this.count;
      }),
      tap(v => {
        if (this.count % 5 === 0) {
          this.active = false;
        }
      })
    )
  }

}

https://stackblitz.com/edit/angular-nzs7zh