CanDeactivate route guard


Create a new guard prevent-unsaved-changes.guard.ts

ng g guard /_guards/prevent-unsaved-changes
  providedIn: 'root'
export class PreventUnsavedChangesGuard
  implements CanDeactivate<MemberEditComponent> {
  canDeactivate(component: MemberEditComponent) {
    if (component.editForm.dirty) {
      return confirm(
        'Are you sure you want to continue? Any unsaved changes will be lost!'
    } else {
      return true;

Add the new guard to app.module.ts in the providers section.

In routes.ts add the new guard to the route of member/edit.

  path: 'member/edit',
  component: MemberEditComponent,
  resolve: { user: MemberEditResolver },
  canDeactivate: [PreventUnsavedChangesGuard]

The guard is now active, test the application.