Angular - Observable with async pipe used multiple times in template... Good Practice or Bad?

If I have the need to bind multiple properties from the same observable within my component template...

For example:

<my-random-component[id]="(myObservable$ | async).id">
...
<my-random-component2[name]="(myObservable$ | async).name">


...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.

Questions:

1. Does the observable in the above code get called each time it is used via | async?
2. 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?
3. Which approach is better/preferred?

Thanks!

Continue reading...