Angular observable returns after navigate to another page

Question

How to abort a return from a rxjs call to backend, when the user navigate to another page before the result returns?

In example below, it shows the alert message even if another page is already loaded.

this.http.get('api/searchforanything', {
  params: {
    data: this.dateService.toLocalISOString(data)
  }
}).subscribe(x => {
    alert("I am back!");
    this.chartLabels = x.meses;
    this.data = x.valores;
    this.isLoading = false;
    
  });

score 3 · Accepted Answer · answered Aug 07 '23 at 11:36

If the request is cancelable, it will be canceled when you unsubscribe. Else the result is just ignored. see You can either write your logic with navigation events from the router or just unsubscribe when your component gets destroyed, which is a good practice in angular anyways.

this.http.get('api/searchforanything', {
  params: {
    data: this.dateService.toLocalISOString(data)
  }
})
.pipe(takeUntil(this.destroy$))
.subscribe(x => {
...

Angular observable returns after navigate to another page

1 Answers1