title: RxJS detect when observable has been subscribed to
body: <p>I have a need to detect when an observable (<code>observedEvents</code>) has been subscribed to, and then subscribe to another observable (<code>triggerEvent</code>). I don't want to subscribe to <code>triggerEvent</code> manually, but only once and when <code>observedEvents</code> has a subscription.</p>
  <p>Here is some code explaining what I am looking for:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// This just emits events
  let emitting = new EventEmitter();
  
  // This is the main Observable which someone else might
  // have access to
  let observedEvents = Rx.Observable.merge(
    Rx.Observable.fromEvent(emitting, 'aba'),
    Rx.Observable.fromEvent(emitting, 'bob')
  )
  
  // This trigger should get a subscription if observedEvents
  // has one, i.e. when I subscribe to observedEvents
  // that subscription activates this trigger
  
  // I have made an attempt at this by calling skipUntil
  // this however skips one event, but I don't want that
  let triggerEvent = Rx.Observable.merge(
    // these actions are things that can
    // happen when the trigger is active
    Rx.Observable.of('a').delay(200),
    Rx.Observable.of('b').delay(400),
    Rx.Observable.of('c').delay(600)
  )
  .skipUntil(observedEvents);
  
  // Something else should be used to activate trigger
  // I don't want to do this part manually
  triggerEvent.subscribe(val =&gt; {
      console.log(`Do something fancy with ${val}`);
  });
  
  //----------------------------------------------------
  // Somewhere else in the code...
  //----------------------------------------------------
  observedEvents.subscribe(evt =&gt; {
    console.log(`Some event: ${evt}`);
  });
  // At this point I want triggerEvent to become active
  // because observedEvents has a subscription
  
  setTimeout(() =&gt; {
    emitting.emit('bob', 'world');
    setTimeout(() =&gt; emitting.emit('aba', 'stackoverflow!'), 500);
  }, 200);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.1.0/EventEmitter.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is this possible?</p>
  <p>I hope that explains what I'm looking for.</p>
  <p>As I'm writing this, I'm thinking a solution with <strong>Subjects</strong> is probably what I need. I'm not sure, but I just need a nudge in the right direction or a solution if possible.</p>