1. How do you prevent navigating away when there are unsaved form changes?
Difficulty: MediumType: SubjectiveTopic: Route Guards
Create a CanDeactivate guard that asks the component if it’s safe to leave, optionally showing a confirm dialog. The guarded component exposes a method like hasUnsavedChanges().
Example code
export interface ExitCheck { hasUnsaved(): boolean; }
@Injectable({ providedIn:'root' })
export class ExitGuard implements CanDeactivate<ExitCheck> {
canDeactivate(cmp: ExitCheck){
return cmp.hasUnsaved() ? confirm('Discard changes?') : true;
}
}
{ path: 'edit/:id', component: EditComponent, canDeactivate:[ExitGuard] }