Answer:48: avoid losing data

apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Route } from '@angular/router';
+import { canDeactivateGuard } from './can-deactivate.guard';
 import { JoinComponent } from './pages/join.component';
 import { PageComponent } from './pages/page.component';
 
@@ -11,6 +12,7 @@ export const appRoutes: Route[] = [
   {
     path: 'form',
     loadComponent: () => JoinComponent,
+    canDeactivate: [canDeactivateGuard],
   },
   {
     path: 'page-1',

apps/forms/48-avoid-losing-form-data/src/app/can-deactivate.guard.ts

@@ -0,0 +1,18 @@
+import { CanDeactivateFn, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+export type CanDeactivateType =
+  | Observable<boolean | UrlTree>
+  | Promise<boolean | UrlTree>
+  | boolean
+  | UrlTree;
+
+export interface CanComponentDeactivate {
+  canDeactivate: () => CanDeactivateType;
+}
+
+export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (
+  component: CanComponentDeactivate,
+) => {
+  return component.canDeactivate ? component.canDeactivate() : true;
+};

apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts

@@ -1,8 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Dialog, DialogModule } from '@angular/cdk/dialog';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  inject,
+  viewChild,
+} from '@angular/core';
+import { map } from 'rxjs';
+import { CanComponentDeactivate } from '../can-deactivate.guard';
+import { AlertDialogComponent } from '../ui/dialog.component';
 import { FormComponent } from '../ui/form.component';
 
 @Component({
-  imports: [FormComponent],
+  imports: [FormComponent, DialogModule],
   template: `
     <section class="mx-auto	max-w-screen-sm">
       <div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
@@ -12,4 +22,34 @@ import { FormComponent } from '../ui/form.component';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JoinComponent {}
+export class JoinComponent implements CanComponentDeactivate {
+  dialog = inject(Dialog);
+
+  formComponent = viewChild(FormComponent);
+
+  @HostListener('window:beforeunload', ['$event'])
+  handleBeforeUnload(event: BeforeUnloadEvent) {
+    const form = this.formComponent()?.form;
+    if (!form?.dirty || !form?.value) {
+      return;
+    }
+
+    event.preventDefault();
+  }
+
+  canDeactivate = () => {
+    const form = this.formComponent()?.form;
+
+    if (form?.dirty && form?.value) {
+      const dialogRef = this.dialog.open<boolean>(AlertDialogComponent, {
+        role: 'alertdialog',
+        ariaDescribedBy: 'dialog-description',
+        ariaLabelledBy: 'dialog-title',
+        ariaModal: true,
+      });
+      return dialogRef.closed.pipe(map((result) => !!result));
+    }
+
+    return true;
+  };
+}

apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts

@@ -1,29 +1,36 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 // NOTE : this is just the dialog content, you need to implement dialog logic
 
 @Component({
   template: `
     <div role="alert" class="rounded-xl border border-gray-100 bg-white p-5">
-      <h3 class="block text-xl font-medium text-red-600">
+      <h3 class="block text-xl font-medium text-red-600" id="dialog-title">
         You have unsaved information!
       </h3>
 
-      <p class="mt-1 text-gray-700">Do you want to continue and lose them?</p>
+      <p id="dialog-description" class="mt-1 text-gray-700">
+        Do you want to continue and lose them?
+      </p>
 
       <div class="mt-4 flex gap-2">
         <button
-          class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
+          class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700"
+          (click)="dialogRef.close(true)">
           Yes continue
         </button>
 
         <button
-          class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
+          class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50"
+          (click)="dialogRef.close(false)">
           Stay on page
         </button>
       </div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AlertDialogComponent {}
+export class AlertDialogComponent {
+  dialogRef = inject<DialogRef<boolean>>(DialogRef<boolean>);
+}

apps/forms/48-avoid-losing-form-data/src/styles.scss

@@ -3,3 +3,4 @@
 @tailwind utilities;
 
 /* You can add global styles to this file, and also import other style files */
+@import '@angular/cdk/overlay-prebuilt.css';