Angular 5 - How to make an API call when user closes the browser window?

I have a tracking mechanism through which I send JSON objects to an API endpoint during the stay of an user on a web page. So I am sending API calls on some particular events. The API has to receive a call when the user leaves the page.

The problem is that I am using the functions below to trigger when the user closes the broser, but the functions are triggered only in browser debug mode.

// page-wrapper.component.ts ... // triggers on DOM unload @HostListener('window:unload', ['$event']) unloadHandler(event) { this.service.apiCall(); // this is nevertriggered console.log('unloaded DOM') // triggered only in browser debug mode } // triggers just before unloadHandler() @HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event) { this.service.apiCall(); // same as above }

So I tried both the methods. If I debug them The methods seems to be triggered but the APIs do not receive anything.

I can ensure that the function that contacts the APIs was tested and it has no problems.

I think the problem is related to unloadHandler() or beforeUnloadHandler().

Does someone know how to call an api when the user closes the broser window or the browser tab?

Note: that the application could live in a standalone browser tab or an iframe.

Continue reading...