2 files changed, 33 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts
new file mode 100644
index 000000000..e0dac0dc3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts
@@ -0,0 +1,14 @@
+import {HostListener} from '@angular/core';
+
+export abstract class ComponentCanDeactivate {
+
+    abstract canDeactivate(): boolean;
+
+
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification($event: any) {
+        if (!this.canDeactivate()) {
+            $event.returnValue = true;
+        }
+    }
+}
diff --git a/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts
new file mode 100644
index 000000000..b24784262
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+
+import {CanDeactivate} from '@angular/router';
+import {ComponentCanDeactivate} from './ComponentCanDeactivate';
+
+@Injectable()
+export class ComponentCanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {
+    canDeactivate(component: ComponentCanDeactivate): boolean {
+
+        if (component.canDeactivate()) {
+            if (confirm('You have unsaved changes! If you leave, your changes will be lost.')) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        return true;
+    }
+}