Is there any lifecycle hook like window.onbeforeunload in Angular2?

Question

Is there any lifecycle hook like window.onbeforeunload in Angular2? I already googled and searched on stackoverflow, but found nothing

Answer 1

<div (window:beforeunload)="doSomething()"></div>

or

@Component({ 
  selector: 'xxx',
  host: {'window:beforeunload':'doSomething'}
  ..
)}

or

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload')
  doSomething() {
  }
}

This is how to listen to global events. I don't know if the special behavior of this event is supported where the return value is used as text for the conformation dialog.

You can still use

export class AppComponent {  
  constructor() {
    window.onbeforeunload = function(e) {
      return 'Dialog text here.';
    };
  }
}

Like explained here https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Answer 2

Günter Zöchbauer's answer is slightly wrong on two one count, this is what worked for me:

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload', ['$event'])
  doSomething($event) {
    if(this.hasChanges) $event.returnValue='Your data will be lost!';
  }
}

There are two main differences from Günter's answer:

1. The argument to @HostListener should be window:beforeunload and not window:onbeforeunload
2. The handler shouldn't return the message, but should assign it into $event.returnValue instead

Answer 3

This worked for me. Defined in the page component constructor

window.addEventListener("beforeunload", (event) => {
   event.preventDefault();
   event.returnValue = "Unsaved modifications";
   return event;
});

Define the returnValue only if you want to prompt user before unload.

Work only if the user interract with the page (e.g. click).

Answer 4

Important note for iOS

The beforeunload event isn't supposed - presumably due to the high level of 'abuse' over the years.

Instead you can use pagehide as recommended by Apple.

This is part of the Page visibility API.

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

So I can't seem to get pagehide to fire on desktop chrome, and I can't get beforeunload to fire on iOS Safari - so you need both - but make sure not to fire your code twice.

@HostListener('window:beforeunload')
@HostListener('window:pagehide')

Answer 5

In angular we can create something like this.

@HostListener('window:beforeunload')
confirmLeavingPageBeforeSaving(): boolean {
  // if 0 display dialog
  // if 1 you can reload
  return !this.myBoolean; 
}

Answer 6

This is more of an added note than an answer but I can't really comment right now.
Still, I wanted to add this:

I wouldn't say it's too complicated of initialization logic, but if you do decide to add the event listener on component initialization it would be best to include this in ngOnInit rather than the constructor:

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  e.returnValue = '...';
});

This is especially if you are including additional logic before unload.

There's also a good article on ngOnDestroy which works similarly to a destructor for directives, pipes, and services. Both approaches are convenient depending on what operations you wish to perform.

Full link text:
https://wesleygrimes.com/angular/2019/03/29/making-upgrades-to-angular-ngondestroy.html

credit to Günter Zöchbauer's original answer

Answer 7

If one is looking for how to add and remove the listener.

 ngOnInit(){
  /*
   * Ask user if they are sure they want to refresh
    * -> Works only if the user interacts with the page (e.g. click).
  */
   window.addEventListener('beforeunload', this.promptIfSureToRedirect, false);
 }

promptIfSureToRedirect(event) {
    event.preventDefault();
    event.returnValue = 'Changes you made may not be saved.';
    return event;
}


 ngOnDestroy(){
   window.addEventListener('beforeunload', this.promptIfSureToRedirect, false);
 }

In a component, listen to the event "beforeunload", then pass a function that will be called before unload. On Destroy, remove this listener by passing the same function used to listen.

// -> I would like to big up @Nicolas and @Umutesen for the pointers

Other pointers:

-> Be sure to work with the event listener in the "window" element, don't interchange with document; e.g document.addEventListener.

Answer 8

According to the chrome documentation here: https://developer.chrome.com/blog/page-lifecycle-api/#the-beforeunload-event most of the answers here are ill advised for it prevents browsers from caching the page in their Back-Forward Cache.

The listener should be conditionally added and removed depending on whether some changes need to be saved or not. An example is provided in the link as well.

Answer 9

You just need to add **beforeunload** in the component, Initialize when its require or in ngOnInit and at last, add remove even listener so its not effect pages of the application.
   
 @Component({
      host: { 'window:beforeunload': '' },
    })
    
    ngOnInit(){
    window.addEventListener('beforeunload', this.checkLoad, false);
    }
    
    checkLoad(event) {
        event.preventDefault();
        event.returnValue =
          'Are you sure you want to discard the form? Your process will be lost.';
        return event;
      }
    
    ngOnDestroy(){
        window.removeEventListener('beforeunload', this.promptIfSureToRedirect, false);