How can I use @HostListener('window:beforeunload') to call a method?

Question

I am trying to call a post method I made myself before my component is unloaded, but it doesn't work.

I put a breakpoint on @HostListener and it doesn't break there when I open a different component.

I'm using Chrome to debug and I turned on Event Listener Breakpoints for unload and beforeunload, which do break when I open a different component.

Am I missing something in my code?

import { Component, OnInit, HostListener } from '@angular/core';

Component({
    templateUrl: 'new-component.html'    
})

export class NewComponent implements OnInit {
    @HostListener('window:beforeunload') onBeforeUnload() {
            PostCall();
    }
}

score 30 · Answer 1 · answered Oct 20 '17 at 12:22

30

Try like this :

@HostListener('window:unload', ['$event'])
unloadHandler(event) {
    this.PostCall();
}

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    return false;
}

PostCall() {
    console.log('PostCall');
}

answered Oct 20 '17 at 12:22

Chandru

10,864
6
38
53

Worked like a charm, appreciated! – Felipe Morais Feb 12 '21 at 19:07
1

The first HostListener does not really work anymore for me: on renavigation from the page, the `PostCall` method is not called. – Server Khalilov Nov 18 '21 at 11:14

Grégory Elhaimer · Accepted Answer · 2017-10-20T13:00:45.217

15

window:beforeunload is a browser event which is triggered right before actually unloading the page.

When you navigate to another component, you are not actually unloading the page.

What you need to do is use ngOnDestroy which will be called when component is being destroyed. Implements the following interface:

https://angular.io/api/core/OnDestroy

Example:

export class NewComponent implements OnDestroy{
    ngOnDestroy() {
            PostCall();
    }
}

edited Oct 20 '17 at 13:00

answered Oct 20 '17 at 12:24

Grégory Elhaimer

2,731
1
16
21

10

ngOnDestory is not called on page refresh case. – Dreamweaver Jul 21 '18 at 08:18
Which is not the initial problem of the author. "I am trying to call a post method I made myself before my component is unloaded, but it doesn't work." – Grégory Elhaimer Jul 21 '18 at 09:16
4

yes, i just put a comment as i was searching something related and got this result, so just put a comment so to help others like me :) – Dreamweaver Jul 21 '18 at 12:49
2

Do any angular lifecycle hooks preempt page refresh? – Austin Cary Jan 11 '19 at 20:24
I use both events - ngOnDestroy and window:beforeunload - to save the grid column settings or whatever needs to be done when the user exits the page. – Jon Vote Aug 18 '23 at 12:00

score 4 · Answer 3 · answered Aug 19 '19 at 13:45

4

Simply use the window:beforeunload event with HostListener, the listener will be destroyed with the component.

Return false will make an alert :)

@HostListener('window:beforeunload')
  onBeforeUnload() {
    return false;
}

answered Aug 19 '19 at 13:45

Patrik Kelemen

159
3

How can I use @HostListener('window:beforeunload') to call a method?

3 Answers3

Linked

Related