CanDeactivateFn

The signature of a function used as a canDeactivate guard on a Route.

If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, the current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard.

The following example implements and uses a CanDeactivateFn that checks whether the user component has unsaved changes before navigating away from the route.

@Component({  template: '',  standalone: false,})export class UserComponent {  hasUnsavedChanges = true;}bootstrapApplication(App, {  providers: [    provideRouter([      {        path: 'user/:id',        component: UserComponent,        canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges],      },    ]),  ],});