How to cancel an ongoing http call resolve or reject onDestroy of angular component

Question

I have a function that does a HTTP post on click of a Submit button. Based on the response I will display a modal saying the request was success or not.

Now the problem arises when the user clicks on the Submit button and immediately clicks on a navigation icon that will load a different component. Now the other page is loaded but still the HTTP request is processed and resolve/reject is called and the modal backdrop fade is displayed which grays out the whole screen and does not allow the user to do anything else. The only way out is to refresh the screen.

Is there a way I can stop executing the resolve / reject onDestroy of the component?

Answer 1

I use this

export class Component implements OnInit, OnDestroy {
    alive = true;
    constructor(
        private route: ActivatedRoute,
        private router: Router
    ) { }

    ngOnInit() {
        this.route.queryParamMap //example observable
            .pipe(
                takeWhile(() => this.alive)
            )
            .subscribe(params => {

            });
    }

    ngOnDestroy(): void {
        this.alive = false;
    }
}

Also you in your redirect button (I suppose that the redirect is in you modal if you have backdrop implemented) you should set the backdrop to false.