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

Question

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!

Answer 1

Using the async pipe makes handling subscriptions much easier. It automatically handles unsubscribing unlike subscribing in the component.

That said, there is a better pattern than what the example is showing. Rather than having multiple async calls on components, you can write it 2 different ways. I'm assuming these components are in the same template file:

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

Wrapping the code in ngIf does 2 things:

• It cuts down on duplicate code
• The components do not exist until myObservable$ is ready

There's also one more idea if you want to stick with calling async every single time:

    // COMPONENT     name$: Observable<string>;     id$: Observable<string>;          ngOnInit() {         // Return the exact value you want rather than the full object              this.name$ = OBSERVABLE_SOURCE         .pipe(             map(res => res.name)         );              this.id$ = OBSERVABLE_SOURCE         .pipe(             map(res => res.id)         );     } 

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

Pipes do not automatically run without a subscription. You can map, tap, or do anything else you want with it and it will not run until you add async/.subscribe().