1// can-deactivate.guard.ts
2import { Injectable } from '@angular/core';
3import { CanDeactivate } from '@angular/router';
4import { Observable } from 'rxjs';
5
6export interface CanComponentDeactivate {
7  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean;
8}
9
10@Injectable({ providedIn: 'root' })
11export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
12  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
13    return component.canDeactivate ? component.canDeactivate() : true;
14  }
15}

1// confirm-dialog.service.ts
2import { Injectable } from '@angular/core';
3import { MatDialog } from '@angular/material/dialog';
4import { Observable } from 'rxjs';
5import { map } from 'rxjs/operators';
6import { ConfirmDialogComponent } from './confirm-dialog.component';
7
8@Injectable({ providedIn: 'root' })
9export class ConfirmDialogService {
10  constructor(private dialog: MatDialog) {}
11
12  confirm(message: string = 'You have unsaved changes. Discard them?'): Observable<boolean> {
13    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
14      data: { message },
15      disableClose: true,  // Prevent closing by clicking outside
16    });
17
18    return dialogRef.afterClosed().pipe(
19      map(result => result === true)  // true = confirmed, anything else = cancelled
20    );
21  }
22}

1// confirm-dialog.component.ts
2import { Component, Inject } from '@angular/core';
3import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
4
5@Component({
6  selector: 'app-confirm-dialog',
7  template: `
8    <h2 mat-dialog-title>Unsaved Changes</h2>
9    <mat-dialog-content>{{ data.message }}</mat-dialog-content>
10    <mat-dialog-actions align="end">
11      <button mat-button (click)="dialogRef.close(false)">Cancel</button>
12      <button mat-raised-button color="warn" (click)="dialogRef.close(true)">Discard</button>
13    </mat-dialog-actions>
14  `,
15})
16export class ConfirmDialogComponent {
17  constructor(
18    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
19    @Inject(MAT_DIALOG_DATA) public data: { message: string }
20  ) {}
21}

1// edit-form.component.ts
2import { Component } from '@angular/core';
3import { Observable } from 'rxjs';
4import { CanComponentDeactivate } from './can-deactivate.guard';
5import { ConfirmDialogService } from './confirm-dialog.service';
6
7@Component({
8  selector: 'app-edit-form',
9  template: `
10    <form [formGroup]="form">
11      <input formControlName="name" placeholder="Name">
12      <textarea formControlName="bio" placeholder="Bio"></textarea>
13      <button (click)="save()">Save</button>
14    </form>
15  `,
16})
17export class EditFormComponent implements CanComponentDeactivate {
18  form = this.fb.group({
19    name: [''],
20    bio: [''],
21  });
22
23  private saved = false;
24
25  constructor(
26    private fb: FormBuilder,
27    private confirmDialog: ConfirmDialogService
28  ) {}
29
30  save(): void {
31    // Save logic...
32    this.saved = true;
33  }
34
35  canDeactivate(): Observable<boolean> | boolean {
36    if (this.saved || !this.form.dirty) {
37      return true;  // No unsaved changes — allow navigation
38    }
39    // Show modal and wait for response
40    return this.confirmDialog.confirm('You have unsaved changes. Discard them?');
41  }
42}

1// app-routing.module.ts
2import { CanDeactivateGuard } from './can-deactivate.guard';
3
4const routes: Routes = [
5  {
6    path: 'edit/:id',
7    component: EditFormComponent,
8    canDeactivate: [CanDeactivateGuard],
9  },
10];

1@Injectable({ providedIn: 'root' })
2export class SimpleConfirmService {
3  private response$ = new Subject<boolean>();
4
5  showConfirm = false;
6  message = '';
7
8  confirm(message: string): Observable<boolean> {
9    this.message = message;
10    this.showConfirm = true;
11    return this.response$.asObservable().pipe(take(1));
12  }
13
14  respond(value: boolean): void {
15    this.showConfirm = false;
16    this.response$.next(value);
17  }
18}

1<!-- In app.component.html -->
2<div class="modal-overlay" *ngIf="confirmService.showConfirm">
3  <div class="modal">
4    <p>{{ confirmService.message }}</p>
5    <button (click)="confirmService.respond(false)">Cancel</button>
6    <button (click)="confirmService.respond(true)">Discard</button>
7  </div>
8</div>

1import { CanDeactivateFn } from '@angular/router';
2
3export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
4  return component.canDeactivate ? component.canDeactivate() : true;
5};
6
7// In routes
8const routes: Routes = [
9  {
10    path: 'edit/:id',
11    component: EditFormComponent,
12    canDeactivate: [canDeactivateGuard],
13  },
14];