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