How can I create a 'can deactivate' guard?

What is a 'can deactivate' guard and how do I create one?

A 'can deactivate' guard is a mechanism that determines if a user can leave a route. To create one, you need to implement a guard service in your routing module.

Can you show me a code example for implementing this guard?

Sure! Here's a simple example in Angular:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean;
}

@Injectable({ providedIn: 'root' })
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate
  ): boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

What should I do if the user has unsaved changes?

You can prompt the user with a confirmation dialog. Modify the canDeactivate method to check for unsaved changes and return a boolean accordingly.