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/de/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

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