How to: Re-send an http request when using async pipe

Question

Is there a way to resend an HttpRequest when using the async pipe in the template like this?

myObservable$ = this.http.get('api');

<div *ngFor='let item of myObservable$ | async'>{{item}}</div>

Answer 1

You need emit a new value to Observable, if you need refetch data by specific event, you can put the event to Observable and use switchMap for trigger fetching:

event$ = new BehaviorSubject(true);

myObservable$ = this.event$.pipe(
  switchMapTo(this.http.get('api'))
);

refetchData() {
  this.event$.next();
}

Answer 2

Using async pipe is a very convenient way to deal with Observables, because it manages unsubscribing for you. Meaning, that if myObservable$ reference changes, ChangeDetection will be triggered and async will unsubscribe current subscription and subscribe to another. So you can simply reassign new value myObservable$ and HttpRequest will be sent again.

test it out yourself:

ngOnInit() {
  setTimeout(() => this.myObservable$ = this.http.get('another-endpoint'), 2000)
}