feat: 55-back-button-navigation

Author: slimabdi

apps/angular/55-back-button-navigation/project.json

@@ -15,15 +15,15 @@
         "browser": "apps/angular/55-back-button-navigation/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/55-back-button-navigation/tsconfig.app.json",
-        "inlineStyleLanguage": "css",
+        "inlineStyleLanguage": "scss",
         "assets": [
           {
             "glob": "**/*",
             "input": "apps/angular/55-back-button-navigation/public"
           }
         ],
         "styles": [
-          "apps/angular/55-back-button-navigation/src/styles.css",
+          "apps/angular/55-back-button-navigation/src/styles.scss",
           "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
         ],
         "scripts": []

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.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { guardNavigationGuard } from './core/guard-navigation.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: [guardNavigationGuard],
   },
   {
     path: 'sensitive-action',
     component: SensitiveActionComponent,
+    canDeactivate: [guardNavigationGuard],
   },
 ];

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

@@ -0,0 +1,4 @@
+export interface BackButtonNavigationHandler {
+  canDeactivate(): boolean;
+  handleBackNavigation(): void;
+}

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

@@ -0,0 +1,13 @@
+import { CanDeactivateFn } from '@angular/router';
+import { BackButtonNavigationHandler } from '../back-button-navigation-handler';
+
+export const guardNavigationGuard: CanDeactivateFn<
+  BackButtonNavigationHandler
+> = (component) => {
+  if (component.canDeactivate()) {
+    return true;
+  }
+
+  component.handleBackNavigation();
+  return false;
+};

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

@@ -1,6 +1,12 @@
-<h2 mat-dialog-title>Delete file</h2>
-<mat-dialog-content>Would you like to delete cat.jpeg?</mat-dialog-content>
+<h2 mat-dialog-title>{{ data?.title ?? 'Delete file' }}</h2>
+<mat-dialog-content>
+  {{ data?.content ?? 'Would you like to delete cat.jpeg?' }}
+</mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close>No</button>
-  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
+  <button mat-button mat-dialog-close>
+    {{ data?.cancelLabel ?? 'No' }}
+  </button>
+  <button mat-button mat-dialog-close cdkFocusInitial>
+    {{ data?.confirmLabel ?? 'Ok' }}
+  </button>
 </mat-dialog-actions>

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import {
+  MAT_DIALOG_DATA,
   MatDialogActions,
   MatDialogClose,
   MatDialogContent,
@@ -21,5 +22,15 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogComponent {
+  readonly data = inject<DialogData>(MAT_DIALOG_DATA, {
+    optional: true,
+  });
   readonly dialogRef = inject(MatDialogRef<DialogComponent>);
 }
+
+export interface DialogData {
+  title: string;
+  content: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+}

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

@@ -1,19 +1,58 @@
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { BackButtonNavigationHandler } from '../back-button-navigation-handler';
 import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
   imports: [MatButtonModule],
   selector: 'app-sensitive-action',
   templateUrl: './sensitive-action.component.html',
 })
-export class SensitiveActionComponent {
+export class SensitiveActionComponent implements BackButtonNavigationHandler {
   readonly #dialog = inject(MatDialog);
+  #initialDialogRef: MatDialogRef<DialogComponent> | null = null;
+  #confirmationDialogRef: MatDialogRef<DialogComponent> | null = null;
 
   openDialog(): void {
-    this.#dialog.open(DialogComponent, {
+    this.#initialDialogRef = this.#dialog.open(DialogComponent, {
       width: '250px',
+      closeOnNavigation: false,
     });
+
+    this.#initialDialogRef.afterClosed().subscribe(() => {
+      this.#initialDialogRef = null;
+      this.#confirmationDialogRef?.close();
+      this.#confirmationDialogRef = null;
+    });
+  }
+
+  canDeactivate(): boolean {
+    return !this.#initialDialogRef && !this.#confirmationDialogRef;
+  }
+
+  handleBackNavigation(): void {
+    if (this.#confirmationDialogRef) {
+      this.#confirmationDialogRef.close();
+      return;
+    }
+
+    if (this.#initialDialogRef) {
+      this.#confirmationDialogRef = this.#dialog.open(DialogComponent, {
+        width: '250px',
+        closeOnNavigation: false,
+        data: {
+          title: 'Confirm navigation',
+          content:
+            'A sensitive dialog is still open. Press Back again to close this confirmation and stay here.',
+          cancelLabel: 'Stay',
+          confirmLabel: 'Ok',
+        },
+      });
+
+      this.#confirmationDialogRef.afterClosed().subscribe(() => {
+        this.#confirmationDialogRef = null;
+      });
+    }
   }
 }

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

@@ -1,19 +1,29 @@
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { BackButtonNavigationHandler } from '../back-button-navigation-handler';
 import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
   imports: [MatButtonModule],
   selector: 'app-simple-action',
   templateUrl: './simple-action.component.html',
 })
-export class SimpleActionComponent {
+export class SimpleActionComponent implements BackButtonNavigationHandler {
   readonly #dialog = inject(MatDialog);
 
   openDialog(): void {
     this.#dialog.open(DialogComponent, {
       width: '250px',
+      closeOnNavigation: false,
     });
   }
+
+  canDeactivate(): boolean {
+    return this.#dialog.openDialogs.length === 0;
+  }
+
+  handleBackNavigation(): void {
+    this.#dialog.closeAll();
+  }
 }