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

Answer 1

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