Angular calling async pipe makes http call that many time

Question

I am using async pipe in the template. If you see my below code i am using async pipe in two different places. Because it is used in two places, it gets subscribed two time and there are two http calls made. How to avoid this one single call with async pipe? I was able to achieve without async by subscribe in ngOnInit() but would like to know how to achieve with single async pipe in my case?

<div class="flex-group space-between">
    <h1>Heading</h1>

    <div *ngIf="historyYears$ | async as historyYears; else loadingComponent">
      <aa-alert alertClass="info" alertText="You have no training history" *ngIf="historyYears.length === 0"></aa-alert>
    </div>
  </div>
  
  <div *ngIf="historyYears$ | async as historyYears; else loadingComponent">
  <!--rest of code goes here -->
  </div>
  
  <ng-template #loadingComponent>
    <app-loading></app-loading>
  </ng-template>

BizzyBob · Accepted Answer · 2022-06-13 21:52:57Z

4

Here are a couple ways to prevent your http call from firing twice:

1. Use the `shareReplay` operator

Component:

public historyYears$ = this.someService.historyYears$.pipe(shareReplay());

This will cause multiple subscriptions to the same observable to share a single subscription.

2. Use a single `async` pipe

<ng-container *ngIf="historyYears$ | async as historyYears">

  <div class="flex-group space-between">
    <h1>Heading</h1>

    <div *ngIf="historyYears; else loadingComponent">
      <aa-alert alertClass="info" alertText="You have no training history" *ngIf="historyYears.length === 0"></aa-alert>
    </div>
  </div>
  
  <div *ngIf="historyYears; else loadingComponent">
    <!--rest of code goes here -->
  </div>
  
  <ng-template #loadingComponent>
    <app-loading></app-loading>
  </ng-template>

</ng-container>

Here we move the *ngIf that uses the async pipe up to a common parent of all elements that need access to historyYears.

answered Jun 13, 2022 at 21:52

BizzyBob

14.9k4 gold badges32 silver badges62 bronze badges

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

1 Comment

Barremian Over a year ago

I agree it was stated in the question already. I'll delete my comment :)

Collectives™ on Stack Overflow

Angular calling async pipe makes http call that many time

1 Answer 1

1. Use the `shareReplay` operator

2. Use a single `async` pipe

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Use the shareReplay operator

2. Use a single async pipe

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

1. Use the `shareReplay` operator

2. Use a single `async` pipe