Using async pipe in template causes multiple requests in Angular 11

Question

I'm doing a web application in Angular v11.0.2. I need to do a HTTP call to show some information on screen. To save time and to take advantage of the async pipe benefits, I'm using it in the template, but, it's causing multiple requests that never stops.

Service

export class MyDataService {

  constructor(
    private http: HttpClient,
  ) {
  }

  fetchMyEmployeeData(): Observable<any[]> {
    return this.http.post<any[]>('ENDPOINT', {});
  }

}

Component

export class MyAwesomeComponent {

  constructor(
    public myDataService: MyDataService,
  ) {
  }

}

Template

<ng-container *ngIf="(myDataService.fetchMyEmployeeData() | async) as data">
</ng-container>

This causes multiple requests and never stops.

The same happens if I use *ngFor:

<tr *ngFor="let d of (myDataService.fetchMyEmployeeData() | async)">
  <td>.</td>
</tr>

I have tried the following this:

Using the shareReplay operator:

fetchMyEmployeeData(): Observable<any[]> {
   return this.http.post<any[]>('ENDPOINT', {}).pipe(shareReplay());
}

Using a simple div:

<div *ngIf="(myDataService.fetchMyEmployeeData() | async) as data">
</div>

I know that if I subscribe from the component and save the results in a local variable, I can call it in the template, but this is not my goal. Working example:

export class MyAwesomeComponent implements OnInit {

  data: any[];

  constructor(
    public myDataService: MyDataService
  ) {
  }

  ngOnInit() {
    // This is not my goal because I will need to handle the subscription life manually.
    this.myDataService.fetchMyEmployeeData().subscribe(res => this.data = res);
  }

}

I have also followed the recommendations given here:

I don't know exactly what causes this multiple requests and how can I avoid it.

My goal is to use the async pipe in the template and do just one HTTP call.

Imagine that you wrote code like this myDataService.fetchMyEmployeeData().subscribe(); myDataService.fetchMyEmployeeData().subscribe() in your ts file. Try to debug it. You will find out that each fetchMyEmployeeData() execution returns a new Observable — yurzui
@yurzui it does. So you are saying that what I'm trying to do returns multiple observables and that's why I see multiple requests? Make sense but now I don't understand how others are able to use async pipe in templates without this behavior. I mean, an advantage to use the async in template is to avoid handling the life of the subscription in the component. There is also a few tutorials out there that shows the same technique without experimenting my issue. What do you recommend? I'm confused. — RRGT19
Define observable as a property like employeeData$ = this.myDataService.fetchMyEmployeeData() in your component and you will be happy with employeeData$ | async in template. — yurzui
@andriishupta It will be needed if we need to use two async pipes in template — yurzui
I thought it was the case with ngContainer and ngFor directives, read not carefully — andriishupta

andriishupta andriishupta · Accepted Answer · 2020-12-04T14:47:20

UPDATE: shareReplay is needed if you call variable multiple times in template, misunderstand the question.

shareReplay() should be on component level, cause when you call the fetchMyEmployeeData() it is a function that returns new Observables(and new shareReplays for each)

in component create:

employeeData$ = this.myDataService.fetchMyEmployeeData().pipe(shareReplay());

and use in template as

employeeData$ | async

in this case, it would do only a single request for back-end

Using async pipe in template causes multiple requests in Angular 11

3 Answers