liveBook · Manning

canDeactivate method

As explained in Pro Angular 16

The canDeactivate method is a guard method that determines whether a component may be deactivated during navigation.

The canDeactivate method is a class-based navigation guard that decides whether Angular may deactivate a component. It receives the component being left, an ActivatedRouteSnapshot, and a RouterStateSnapshot, then returns boolean or Promise<boolean>. section 26.2.2

Blocking navigation with unsaved edits

An UnsavedGuard checks whether the form component is editing and its productForm is dirty. If both conditions hold, it prompts the user and resolves the returned promise according to the selected response. Register the guard in the module, then attach it to a route through canDeactivate. section 26.2.2

How Pro Angular 16 covers it

How deep it goes
Explains the guard signature, asynchronous confirmation, service registration, and route application without detailing router internals.
Examples
Uses an editable product form, dirty-state detection, Cancel, Next, and Previous navigation, and a confirmation message.
What it assumes
Assumes Angular routing, components, and reactive forms while teaching the guard arguments and configuration steps.
What you can do after
Build it from scratch by implementing, registering, and routing a class-based guard for unsaved form changes.
How it connects
Connects navigation guards with Angular routing, reactive forms, component state, and user confirmation.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.