async pipe inside ngIf still gets value

Question

I want to write a collapsible component which has an "Expand" button that opens a list of items. This list is created through a web request, and I'm wondering when this request happens - since to my understanding the async pipe is like a subscription and the ngIf would cause the component subscribing to be recreated, I would expect the value of the request to only be available once, however it is created each time I 'show' the expander.

StackBlitz minimal example

Inside my AppComponent I have this logic:

  data$ = of('expensive data from server').pipe(
    take(1),
    tap(() => console.log('data from server emit!')),
    // shareReplay(1),
    finalize(() => console.log('complete!'))
  );
  showSon = true;

The template is like this:

<button (click)="showSon=!showSon">Click me!</button>
<p *ngIf="showSon">
  <ng-container *ngIf="data$ | async as data">
    <div>{{data}}</div>
  </ng-container>
</p>

My understanding is that since the observable is created via of, that it should fire its value once and then complete, confirmed by the console logs. However I'm surprised that every time I show the element inside the ngIf, I still get a value even though async is now subscribing to a completed observable that is not a ReplaySubject.

I think using shareReplay(1) would solve the issue of making multiple web requests, but I still don't understand how the single-use observable is repeatedly available whenever the template inside the ngIf is recreated.

Answer 1

MikeOne's comment is correct. Everytime the If is true, the element gets recreated.. so the async pipe re-subscribes to the data$ observable causing it to emit again..

Your solution is also correct, to use shareReplay(1) as you've mentioned.