title: How to best handle multiple subscriptions to the same observable on the template?
body: <p>Let's say I have an observable called 'todoList$'. Using the 'async' operator, I'm able to automatically subscribe/unsubscribe from it. The problem in the code below is that there are two identical subscriptions to the same observable:</p>
  <pre><code>&lt;ng-container *ngIf=&quot;(todoList$ | async).length &gt; 0&gt;
    &lt;div *ngFor=&quot;let todo of todoList$ | async&quot;&gt;
      ...
  </code></pre>
  <p>This isn't very DRY, and consequentially, we allocate memory for a subscription that could handled more efficiently.</p>
  <p>Because of the syntax in the ngIf condition, I don't believe I can use the 'as' keyword to create a template variable for the observable output. <strong>Instead what works is when I use the RxJs 'share' operator from the component file</strong>:</p>
  <pre><code>todoList$ = this.store.select(todoList).pipe(tap(x =&gt; {console.log('testing')}), share());
  //testing  
  </code></pre>
  <p>Without the share operator, &quot;testing&quot; is printed twice. This leads me to believe the share() operator solves this problem. If it does, not exactly sure why/how? Since this can be a prevalent issue/ code smell, what's the best way of handling multiple subscriptions that are identical within the same template?</p>
  <p><em>I acknowledge there are a few flavors of a similar question floating on StackOverflow. But none have given me exactly what I'm looking for.</em></p>