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
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).
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:
The argument to@HostListener
should bewindow:beforeunload
and notwindow:onbeforeunload
- The handler shouldn't return the message, but should assign it into
$event.returnValue
instead