@angular/router

CanDeactivateFn

Type Alias

stable

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

API

  type CanDeactivateFn<T> = ( component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot,) => MaybeAsync<GuardResult>

Description

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], }, ]), ],});