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

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

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest
<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/de/docs/Web/API/WindowEventHandlers/onbeforeunload

Jason
Guest

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
Jason
Guest

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).

Jason
Guest

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')