title: How to add a stop and start feature for an RxJS timer?
body: <p>I added a start, stop, pause button. Start will start a count down timer which will start from a value, keep decrementing until value reaches 0. We can pause the timer on clicking the pause button. On click of Stop also timer observable completes.</p>
  <ul>
  <li><p>However, once the timer is completed ( either when value reaches 0 or
  when clicked on stop button ), I am not able to start properly. I
  tried adding repeatWhen operator. It starts on clicking twice. Not at
  the first time.</p>
  </li>
  <li><p>Also, at stop, value is not resetting back to the initial value.</p>
  </li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const subscription = merge(
    startClick$.pipe(mapTo(true)),
    pauseBtn$.pipe(mapTo(false))
  )
    .pipe(
      tap(val =&gt; {
        console.log(val);
      }),
      switchMap(val =&gt; (val ? interval(10).pipe(takeUntil(stopClick$)) : EMPTY)),
      mapTo(-1),
      scan((acc: number, curr: number) =&gt; acc + curr, startValue),
      takeWhile(val =&gt; val &gt;= 0),
      repeatWhen(() =&gt; startClick$),
      startWith(startValue)
    )
    .subscribe(val =&gt; {
      counterDisplayHeader.innerHTML = val.toString();
    });</code></pre>
  </div>
  </div>
  </p>
  <p>Stackblitz Code link is available <a href="https://stackblitz.com/edit/rxjs-tdcfxf?file=index.ts" rel="nofollow noreferrer">here</a></p>