liveBook · Manning

Unsaved edits

As explained in Pro Angular 16

Unsaved edits are modifications to application data that have not yet been persisted.

Unsaved edits are changes to application data that remain only in the editing form. Route deactivation guards can warn users before navigation abandons those changes. section 26.2.2

A practical Angular protection follows three steps:

  • Check the component’s editing state and whether its product form is dirty. section 26.2.2
  • Return a boolean or Promise<boolean>; resolve the Promise from the user’s confirmation response. section 26.2.2
  • Register the guard and attach it to the route with canDeactivate. section 26.2.2

Editing a product

After opening a product’s Edit form and changing a text field, navigate elsewhere. The guard displays Yes and No responses; confirming allows navigation, while declining keeps the editing route active. section 26.2.2

How Pro Angular 16 covers it

How deep it goes
Explains component checks, Promise-based confirmation, service registration, and canDeactivate configuration.
Examples
Uses a product editor, changed text fields, a Cancel control, and Yes-or-No navigation prompts.
What it assumes
Assumes an editable product component, a reactive form, and configured Angular routes.
What you can do after
Build it from scratch by implementing, registering, and applying an Angular canDeactivate guard.
How it connects
Connects unsaved edits to route deactivation guards, reactive forms, dirty state, and navigation.
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.