Answer:55 back button navigation

apps/angular/55-back-button-navigation/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
-  imports: [RouterOutlet, RouterLink],
+  imports: [RouterOutlet],
   selector: 'app-root',
   templateUrl: './app.component.html',
 })

apps/angular/55-back-button-navigation/src/app/app.config.ts

@@ -1,10 +1,17 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { provideRouter } from '@angular/router';
 import { APP_ROUTES } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(APP_ROUTES),
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: {
+        closeOnNavigation: false,
+      },
+    },
   ],
 };

apps/angular/55-back-button-navigation/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { CanDeactivateGuard } from './can-decativate.guard';
 import { HomeComponent } from './home/home.component';
 import { SensitiveActionComponent } from './sensitive-action/sensitive-action.component';
 import { SimpleActionComponent } from './simple-action/simple-action.component';
@@ -16,9 +17,11 @@ export const APP_ROUTES: Routes = [
   {
     path: 'simple-action',
     component: SimpleActionComponent,
+    canDeactivate: [CanDeactivateGuard],
   },
   {
     path: 'sensitive-action',
     component: SensitiveActionComponent,
+    canDeactivate: [CanDeactivateGuard],
   },
 ];

apps/angular/55-back-button-navigation/src/app/can-decativate.guard.ts

@@ -0,0 +1,42 @@
+import { inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  CanDeactivate,
+  GuardResult,
+  MaybeAsync,
+  UrlTree,
+} from '@angular/router';
+import { Observable } from 'rxjs';
+
+export type CanDeactivateType =
+  | Observable<boolean | UrlTree>
+  | Promise<boolean | UrlTree>
+  | boolean
+  | UrlTree;
+
+export interface CanComponentDeactivate {
+  canDeactivate?: () => CanDeactivateType;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CanDeactivateGuard
+  implements CanDeactivate<CanComponentDeactivate>
+{
+  readonly #dialog = inject(MatDialog);
+
+  canDeactivate(component: CanComponentDeactivate): MaybeAsync<GuardResult> {
+    return component.canDeactivate
+      ? component.canDeactivate()
+      : this.defaultCanDeactivate();
+  }
+
+  defaultCanDeactivate(): boolean {
+    if (this.#dialog.openDialogs.length === 0) {
+      return true;
+    }
+    this.#dialog.closeAll();
+    return false;
+  }
+}

apps/angular/55-back-button-navigation/src/app/sensitive-action/sensitive-action.component.ts

@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { CanDeactivateType } from '../can-decativate.guard';
 import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
@@ -16,4 +17,18 @@ export class SensitiveActionComponent {
       width: '250px',
     });
   }
+
+  canDeactivate: () => CanDeactivateType = () => {
+    if (this.#dialog.openDialogs.length === 0) {
+      return true;
+    }
+
+    const confirmation = confirm(
+      'You have open dialogs. Are you sure you want to leave this page?',
+    );
+    if (confirmation) {
+      this.#dialog.closeAll();
+    }
+    return confirmation;
+  };
 }