title: RxJS: dynamically add and remove Observable with merge
body: <p>I'm trying to build a pluggable <code>ProgressService</code>.</p>
  
  <p>The service should track how many "things" are currently loading. And have an <code>isLoading()</code> method that returns an <code>Observable&lt;boolean&gt;</code> to indicate if anything is loading at all.</p>
  
  <p>My first solution was very naive using a <code>new BehaviorSubject(0)</code> and then each loading provider just called <code>ProgressService.increase()</code> and <code>ProgressService.decrease()</code>. This worked fine. But now I'd like to go more reactive, if possible.</p>
  
  <hr>
  
  <p>Then I came across <code>merge</code>, which works fine when all loading providers are known at the beginning:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.progress = merge(...progressProviders).pipe(
    scan((acc, curr) =&gt; acc + (curr ? 1 : -1), 0)
  );
  </code></pre>
  
  <p>This will simply increase / decrease the <code>progress</code> value, when any loading provider emits <code>true</code> or <code>false</code>.</p>
  
  <p>But I also need some kind of register / unregister functionality. This should basically add a new <code>Observable</code> to the <code>merge</code> chain (or remove it).</p>
  
  <hr>
  
  <p>The new <code>ProgressService</code> should look like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>class ProgressService {
  
    progress: Observable&lt;number&gt; = EMPTY; // value &gt; 0 when something is loading
  
    addLoadingProvider(lp: Observable&lt;boolean&gt;) {
      // increment this.progress, when lp emits true
      // decrease this.progress, when lp emits false
      // nice to have: ignore if lp's first emitted value is false
    }
  
    removeLoadingProvider(lp: Observable&lt;boolean&gt;) {
      // stop listening to lp
      // clean up: decrease this.progress, if lp last emitted true
    }
  
    isLoading(): Observable&lt;boolean&gt; {
      return this.progress.pipe(
        map(val =&gt; val !== 0)
      );
    }
  
  }
  </code></pre>
  
  <p>Maybe the <code>removeLoadingProvider</code> method isn't needed at all (?), if we return a <code>Subscription</code> from <code>addLoadingProvider</code>, and use <code>Subscription.unsubscribe()</code> to unregister.</p>
  
  <p>Hopefully someone can tell me how to <code>merge</code> and <code>unmerge</code> additional Observables on demand.</p>