Angular async pipe usage difference

Question

For example, if I have an Observable in my component and I want to use it in my template in multiple places or I need to put the Observable value into the child component in case of only the result is not null

my.component.ts

export class MyComponent {
   myObservable$: Observable<SomeData | null>;
}

I can do it in these different ways:

First way

<child-component *ngIf="myObservable | async as data" [data]="data"></child-component>

Second way

<child-component *ngIf="myObservable | async" [data]="myObservable | async"></child-component>

I would to know is there any performance difference or usage recommendation?

AliF50 · Accepted Answer · 2021-05-02 17:32:35Z

2

The First way is the preferred way because each | async pipe is a subscription.

In the Second way you are subscribing twice and you can have a performance hit (doubt you will notice it).

Imagine your observable stream was something like this:

myObservable$ = anotherObservable$.pipe(map(complicatedStuffHere()), map(moreComplicatedStuff()));

With the 2nd way, complicatedStuffHere() and moreComplicatedStuffHere() will be called twice. Basically, each async is a new subscription and it can cause a performance hit.

answered May 2, 2021 at 17:32

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashot Aleqsanyan Over a year ago

thank you AliF50 for your answer, but I think you are not right about the second way, it will be called only once and will notify both listeners

Ashot Aleqsanyan Over a year ago

let me create a simple reproduction example so we can test what you said.

Ashot Aleqsanyan Over a year ago

ah yes, you are right, it will be called twice, stackblitz.com/edit/rxjs-mncsxk?file=index.ts here is the reproduction example if you will need, thank you!

Roman · Accepted Answer · 2021-05-02 17:52:34Z

2

If you need to show some block based on your observable value, the best way to do it is the following way:

<ng-container *ngIf="myObservable | async as data">
   <child-component [data]="data"></child-component>
</ng-container>

In this case, you don't create an extra HTML-component and we get the value for our child-component.

Also, remember to avoid passing observables into the components. Components have to have values in their inputs.

answered May 2, 2021 at 17:52

Roman

862 bronze badges

1 Comment

Ashot Aleqsanyan Over a year ago

Roman Thank you for your answer. yeah you are right, I will be careful

Collectives™ on Stack Overflow

Angular async pipe usage difference

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related