title: Run function on observable subscribe
body: <p>I'm attempting to write a custom component that can bind to an observable being passed in through an input and show/hide elements based on the state of the observable. What I'd like to be able to do is something like:</p>
  
  <pre><code>@Input() observable: Observable&lt;any&gt;;
  ngOnInit() {
      this.observable.onSubscribe(() =&gt; {
          // show element, run logic on start;
      });
      this.observable.onCompleteOrNext(() =&gt; {
          // hide element, run logic on end;
      });
  }
  </code></pre>
  
  <p>After pouring over the rxjs documentation, I've found that with <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md" rel="nofollow">let</a> I could do something like:</p>
  
  <pre><code>this.observable.let((o: Observable) =&gt; {
      // run logic.
      return o;
  });
  </code></pre>
  
  <p>But this seems like a bit of a hack, and I also can't figure out how to then run something when the observable completes. I expect the observables to be async, such as an HTTP request, but this component needs to handle it either way.</p>
  
  <p>For the observable completing, I assumed I would be able to do something like the below with the <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/do.md" rel="nofollow">do</a> function:</p>
  
  <pre><code>this.observable.do(() =&gt; {
      // run logic when observable completes.
      // not getting called.
  });
  </code></pre>
  
  <p>But, unless the <code>do</code> function is defined on the observable creation, this is not getting called.</p>
  
  <p>I'm aware Angular2 allows binding the view directly to observables, but I also need the ability to run logic based on the observable, not just show/hide view elements.</p>
  
  <p>My googlefoo is failing me and the rxjs documentation isn't being very enlightening, but I feel like this should be a fairly easy thing to do. Perhaps I am approaching it wrong.</p>