title: Angular 2 + RxJS: async pipe with .share() operator
body: <p>When using the <code>async</code> pipe on a observable that is using the <code>.share()</code> operator (due to expensive calculations in the backend), I stumbled upon this behaviour:</p>
  <pre><code>data$ = (new Observable(observer =&gt; {
      let counter=0;
      observer.next(counter)
  
      window.setInterval(() =&gt; {
        observer.next(counter);
        counter++;
      }, 2000);
    }))
    .share();
  </code></pre>
  <p>Template:</p>
  <pre><code>{{ (data$|async) !== null }}
  {{ (data$|async) !== null }}
  </code></pre>
  <p>The output of the initial value is:</p>
  <pre><code>true false
  </code></pre>
  <p>The following outputs (after more than 2 seconds) are:</p>
  <pre><code>true true
  </code></pre>
  <p>which is the behavior I would expect for the first value, too.
  If I omit the <code>.share()</code>, the output for the first value is <code>&quot;true true&quot;</code>, as I would expect. I suppose the behavior above is due to the fact that the first expression in the template triggers observable execution, and once the second <code>async</code> pipe subscribes to the observable, the data is already gone. Is this explanation correct? And how can I avoid this behavior?</p>