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

<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

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

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