Angular 2 - Execute code when closing window
Thanks everyone for the help. I was able to create a solution based on different proposal.
First I used the beforeunload event in the component
@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
this.endChat();
}
where
endChat() {
this.chatService.endChatSync(this.chatSessionInfo);
}
Then, the trick is to make the http call sync not async.
Before, the endchat method at the chat service was
endChat(chatSessionInfo: ChatSessionInfo) : Observable<ChatTranscription> {
console.log("Ending chat..");
let body = JSON.stringify(chatSessionInfo);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.delete(this.apiUrl + "Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,options)
.map(this.extractData)
.catch(this.handleError);
}
I was able to make it work with
endChatSync(chatSessionInfo: ChatSessionInfo) {
console.log("Ending chat..");
let xhr = new XMLHttpRequest()
xhr.open("DELETE",this.apiUrl +"Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,false);
xhr.send();
}
Hope this helps!
@HostListener('window:unload', ['$event'])
unloadHandler(event) {
...
}
See also javascript to check when the browser window is close