Answer:48

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,21 @@
+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,
+  currentRoute,
+  currentState,
+  nextState,
+) => {
+  return component.canDeactivate ? component.canDeactivate() : true;
+};

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

@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { map, Observable } from 'rxjs';
+import { AlertDialogComponent } from '../ui/dialog.component';
 import { FormComponent } from '../ui/form.component';
 
 @Component({
@@ -7,10 +10,31 @@ import { FormComponent } from '../ui/form.component';
   template: `
     <section class="mx-auto	max-w-screen-sm">
       <div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
-        <app-form />
+        <app-form (unsavedChange)="onUnsavedChange($event)" />
       </div>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JoinComponent {}
+export class JoinComponent {
+  unsavedChanges!: boolean;
+  readonly dialog = inject(MatDialog);
+
+  onUnsavedChange(unsavedChanges: boolean): void {
+    this.unsavedChanges = unsavedChanges;
+  }
+
+  canDeactivate(): Observable<boolean> | boolean {
+    if (this.unsavedChanges) {
+      const dialogRef = this.dialog.open(AlertDialogComponent, {
+        disableClose: true,
+        ariaDescribedBy:
+          'Unsaved information modal. Hit Yes, Continue and agree to lost info or Stay on page button',
+        ariaLabel: 'Unsaved Info',
+      });
+      return dialogRef.afterClosed().pipe(map((res: boolean) => res));
+    } else {
+      return true;
+    }
+  }
+}

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

@@ -1,24 +1,35 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 // NOTE : this is just the dialog content, you need to implement dialog logic
 
 @Component({
   standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
   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 mat-dialog-title class="block text-xl font-medium text-red-600">
         You have unsaved information!
       </h3>
 
-      <p class="mt-1 text-gray-700">Do you want to continue and lose them?</p>
+      <p mat-dialog-content class="mt-1 text-gray-700">
+        Do you want to continue and lose them?
+      </p>
 
-      <div class="mt-4 flex gap-2">
+      <div mat-dialog-actions align="end" class="mt-4 flex gap-2">
         <button
+          mat-button
+          [aria-label]="'Continue and agree with losing information'"
+          [mat-dialog-close]="true"
           class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
           Yes continue
         </button>
 
         <button
+          mat-button
+          [aria-label]="'Stay on page'"
+          [mat-dialog-close]="false"
           class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
           Stay on page
         </button>

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

@@ -1,5 +1,16 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  output,
+} from '@angular/core';
+import {
+  FormBuilder,
+  ReactiveFormsModule,
+  Validators,
+  ValueChangeEvent,
+} from '@angular/forms';
+import { filter } from 'rxjs';
 
 @Component({
   selector: 'app-form',
@@ -64,6 +75,7 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 })
 export class FormComponent {
   private fb = inject(FormBuilder);
+  unsavedChange = output<boolean>();
 
   form = this.fb.nonNullable.group({
     name: ['', { validators: [Validators.required] }],
@@ -72,6 +84,17 @@ export class FormComponent {
     message: '',
   });
 
+  constructor() {
+    this.form.events
+      .pipe(filter((event) => event instanceof ValueChangeEvent))
+      .subscribe((event) => {
+        const unsavedChanges: boolean = Object.values(event.value).some(
+          (val) => !!(val as string).trim(),
+        );
+        this.unsavedChange.emit(unsavedChanges);
+      });
+  }
+
   onSubmit() {
     if (this.form.valid) this.form.reset();
   }