Feature: Exit guard if bill is dirty is sales to prevent accidentally backing out of a bill with data.

bookie/src/app/sales/can-deactivate-bill.guard.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { CanDeactivate } from '@angular/router';
+import { Observable, of as observableOf } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+
+import { BillsComponent } from './bills/bills.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CanDeactivateBillGuard implements CanDeactivate<BillsComponent> {
+  constructor(private dialog: MatDialog) {}
+  canDeactivate(component: BillsComponent): Observable<boolean> | boolean {
+    if (!component.bs.isDirty()) {
+      return observableOf(true);
+    }
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '250px',
+      data: { title: 'Abandon Bill?', content: 'Current items will be lost.' },
+    });
+
+    return dialogRef.afterClosed().pipe(map((result: boolean) => result));
+  }
+}