How to terminate the inprogress api service call while angular route changes

Question

In my application dashboard and multiple pages are available, for dashboard page calling multiple api services to get the reports, while loading the dashboard page user clicks the other page link, so that route changes though the dashboard related api call is executing.

Is there any mechanism to stop the api service call in angular.

like jquery xhr.abort().

Answer 1

If you have multiple subscriptions in your component, you might consider using a package that handles automatically unsubscribing for you, e.g. ngx-auto-unsubscribe.

// import auto unsubscribe library
import { AutoUnsubscribe } from "ngx-auto-unsubscribe";

@AutoUnsubscribe() // this decorator will handle automatically unsubscribing for your
@Component({
  selector: 'inbox'
})
export class InboxComponent {
  one: Subscription;
  two: Subscription; // etc.

  constructor( private store: Store<any>, private element : ElementRef ) {}

  ngOnInit() {
    this.one = store.select("data").subscribe(data => // do something);
    this.two = Observable.interval.subscribe(data => // do something);
  }

  // If you work with AOT this method must be present, even if empty! 
  // Otherwise 'ng build --prod' will optimize away any calls to ngOnDestroy, 
  // even if the method is added by the @AutoUnsubscribe decorator
  ngOnDestroy() {
    // You can also do whatever you need here
  }
}