title: Angular - Observable with async pipe used multiple times in template... Good Practice or Bad?
body: <p>If I have the need to bind multiple properties from the same observable within my component template... </p>
  
  <p>For example:</p>
  
  <pre><code>&lt;my-random-component[id]="(myObservable$ | async).id"&gt;
  ...
  &lt;my-random-component2[name]="(myObservable$ | async).name"&gt;
  </code></pre>
  
  <p>...am I better off doing it like I have above (which I see a lot), or is it more efficient to subscribe to my observable inside my .ts file, set a single object variable, and then bind to that? The idea with the latter approach being that the observable will only be called once.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>Does the observable in the above code get called each time it is used via | async?</li>
  <li>Does the compiler do any efficiency magic behind the scenes to only call the observable once even if used 10 times w/in my template?</li>
  <li>Which approach is better/preferred?</li>
  </ol>
  
  <p>Thanks!</p>