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

Friso picture Friso · Oct 20, 2017 · Viewed 26.2k times · Source

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.

enter image description here

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();
    }
}

Answer

Chandru picture Chandru · Oct 20, 2017

Try like this :

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

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

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