Removing beforeunload event in angular

Question

I am trying to remove event using window.removeEventListener which I have added using window.addEventListener for event beforeunload but it is not getting removed. I am trying following code

addAlertWithListener(){

   window.addEventListener('beforeunload', (event) => {
     // Cancel the event as stated by the standard.
     event.preventDefault();
     // Chrome requires returnValue to be set.
     event.returnValue = 'You are currently in edit mode. Are you sure you want to refresh the page?';
  
   },true);
}

It is being added but when I am trying to remove the same function using below code :

 removeAlertWithListener() {
    window.removeEventListener('beforeunload', null,true);
  }

It still gives alert message. Am I missing something over here? I tried with and without last param. None of the thing seems working here.

Answer 1

addEventListener and removeEventListener are implemented in a weird way in JavaScript, they need exactly the same parameters in order to retrieve the registered listeners. That's different from, like, setTimeout where an id is returned.

In Angular, usually I do something like this:

private readonly BEFORE_UNLOAD_PARAMS = ['beforeunload', (event) => ..., true];
private isBeforeUnloadActive: boolean = false;

addAlertWithListener() {
   if (this.isBeforeUnloadActive) return;
   window.addEventListener(...this.BEFORE_UNLOAD_PARAMS);
   this.isBeforeUnloadActive = true;
}

removeAlertWithListener() {
   window.removeEventListener(...this.BEFORE_UNLOAD_PARAMS);
   this.isBeforeUnloadActive = false;
}

The flag will prevent the listener to be registered twice