Answer:55 back button navigation

apps/angular/1-projection/project.json

@@ -15,12 +15,12 @@
         "main": "apps/angular/1-projection/src/main.ts",
         "polyfills": ["apps/angular/1-projection/src/polyfills.ts"],
         "tsConfig": "apps/angular/1-projection/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/1-projection/src/favicon.ico",
           "apps/angular/1-projection/src/assets"
         ],
-        "styles": ["apps/angular/1-projection/src/styles.scss"],
+        "styles": ["apps/angular/1-projection/src/styles.css"],
         "scripts": [],
         "allowedCommonJsDependencies": ["seedrandom"]
       },

apps/angular/10-utility-wrapper-pipe/project.json

@@ -15,12 +15,12 @@
         "main": "apps/angular/10-utility-wrapper-pipe/src/main.ts",
         "polyfills": "apps/angular/10-utility-wrapper-pipe/src/polyfills.ts",
         "tsConfig": "apps/angular/10-utility-wrapper-pipe/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/10-utility-wrapper-pipe/src/favicon.ico",
           "apps/angular/10-utility-wrapper-pipe/src/assets"
         ],
-        "styles": ["apps/angular/10-utility-wrapper-pipe/src/styles.scss"],
+        "styles": ["apps/angular/10-utility-wrapper-pipe/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/13-highly-customizable-css/project.json

@@ -15,12 +15,12 @@
         "main": "apps/angular/13-highly-customizable-css/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/13-highly-customizable-css/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/13-highly-customizable-css/src/favicon.ico",
           "apps/angular/13-highly-customizable-css/src/assets"
         ],
-        "styles": ["apps/angular/13-highly-customizable-css/src/styles.scss"],
+        "styles": ["apps/angular/13-highly-customizable-css/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/16-master-dependency-injection/project.json

@@ -15,13 +15,13 @@
         "main": "apps/angular/16-master-dependency-injection/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/16-master-dependency-injection/src/favicon.ico",
           "apps/angular/16-master-dependency-injection/src/assets"
         ],
         "styles": [
-          "apps/angular/16-master-dependency-injection/src/styles.scss"
+          "apps/angular/16-master-dependency-injection/src/styles.css"
         ],
         "scripts": []
       },

apps/angular/21-anchor-navigation/project.json

@@ -15,12 +15,12 @@
         "main": "apps/angular/21-anchor-navigation/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/21-anchor-navigation/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/21-anchor-navigation/src/favicon.ico",
           "apps/angular/21-anchor-navigation/src/assets"
         ],
-        "styles": ["apps/angular/21-anchor-navigation/src/styles.scss"],
+        "styles": ["apps/angular/21-anchor-navigation/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/22-router-input/project.json

@@ -19,7 +19,7 @@
           "apps/angular/22-router-input/src/favicon.ico",
           "apps/angular/22-router-input/src/assets"
         ],
-        "styles": ["apps/angular/22-router-input/src/styles.scss"],
+        "styles": ["apps/angular/22-router-input/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/31-module-to-standalone/project.json

@@ -19,7 +19,7 @@
           "apps/angular/31-module-to-standalone/src/favicon.ico",
           "apps/angular/31-module-to-standalone/src/assets"
         ],
-        "styles": ["apps/angular/31-module-to-standalone/src/styles.scss"],
+        "styles": ["apps/angular/31-module-to-standalone/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/32-change-detection-bug/project.json

@@ -19,7 +19,7 @@
           "apps/angular/32-change-detection-bug/src/favicon.ico",
           "apps/angular/32-change-detection-bug/src/assets"
         ],
-        "styles": ["apps/angular/32-change-detection-bug/src/styles.scss"],
+        "styles": ["apps/angular/32-change-detection-bug/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/32-change-detection-bug/src/app/main-navigation.component.ts

@@ -21,13 +21,12 @@ interface MenuItem {
       </a>
     }
   `,
-  styles: [
-    `
-      a.isSelected {
-        @apply bg-gray-600 text-white;
-      }
-    `,
-  ],
+  styles: `
+    @reference "tailwindcss";
+    a.isSelected {
+      @apply bg-gray-600 text-white;
+    }
+  `,
   host: {
     class: 'flex flex-col p-2 gap-2',
   },

apps/angular/33-decoupling-components/project.json

@@ -19,7 +19,7 @@
           "apps/angular/33-decoupling-components/src/favicon.ico",
           "apps/angular/33-decoupling-components/src/assets"
         ],
-        "styles": ["apps/angular/33-decoupling-components/src/styles.scss"],
+        "styles": ["apps/angular/33-decoupling-components/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/39-injection-token/project.json

@@ -19,7 +19,7 @@
           "apps/angular/39-injection-token/src/favicon.ico",
           "apps/angular/39-injection-token/src/assets"
         ],
-        "styles": ["apps/angular/39-injection-token/src/styles.scss"],
+        "styles": ["apps/angular/39-injection-token/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/4-typed-context-outlet/project.json

@@ -15,12 +15,12 @@
         "main": "apps/angular/4-typed-context-outlet/src/main.ts",
         "polyfills": "apps/angular/4-typed-context-outlet/src/polyfills.ts",
         "tsConfig": "apps/angular/4-typed-context-outlet/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/4-typed-context-outlet/src/favicon.ico",
           "apps/angular/4-typed-context-outlet/src/assets"
         ],
-        "styles": ["apps/angular/4-typed-context-outlet/src/styles.scss"],
+        "styles": ["apps/angular/4-typed-context-outlet/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/44-view-transition/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/44-view-transition/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/44-view-transition/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/44-view-transition/src/favicon.ico",
           "apps/angular/44-view-transition/src/assets"
         ],
-        "styles": ["apps/angular/44-view-transition/src/styles.scss"],
+        "styles": ["apps/angular/44-view-transition/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/45-react-in-angular/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/45-react-in-angular/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/45-react-in-angular/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/45-react-in-angular/src/favicon.ico",
           "apps/angular/45-react-in-angular/src/assets"
         ],
-        "styles": ["apps/angular/45-react-in-angular/src/styles.scss"],
+        "styles": ["apps/angular/45-react-in-angular/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/46-simple-animations/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/46-simple-animations/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/46-simple-animations/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/46-simple-animations/src/favicon.ico",
           "apps/angular/46-simple-animations/src/assets"
         ],
-        "styles": ["apps/angular/46-simple-animations/src/styles.scss"],
+        "styles": ["apps/angular/46-simple-animations/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/46-simple-animations/src/app/app.component.ts

@@ -4,6 +4,8 @@ import { Component } from '@angular/core';
   imports: [],
   selector: 'app-root',
   styles: `
+@reference "tailwindcss";
+
     section {
       @apply flex flex-1 flex-col gap-5;
     }

apps/angular/5-crud-application/project.json

@@ -15,14 +15,14 @@
         "main": "apps/angular/5-crud-application/src/main.ts",
         "polyfills": "apps/angular/5-crud-application/src/polyfills.ts",
         "tsConfig": "apps/angular/5-crud-application/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/5-crud-application/src/favicon.ico",
           "apps/angular/5-crud-application/src/assets"
         ],
         "styles": [
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-          "apps/angular/5-crud-application/src/styles.scss"
+          "apps/angular/5-crud-application/src/styles.css"
         ],
         "scripts": [],
         "allowedCommonJsDependencies": ["seedrandom"]

apps/angular/52-lazy-load-component/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/52-lazy-load-component/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/52-lazy-load-component/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/52-lazy-load-component/src/favicon.ico",
           "apps/angular/52-lazy-load-component/src/assets"
         ],
-        "styles": ["apps/angular/52-lazy-load-component/src/styles.scss"],
+        "styles": ["apps/angular/52-lazy-load-component/src/styles.css"],
         "scripts": []
       },
       "configurations": {

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;
+      });
+    }
   }
 }