Safeguarding User Edits: Effective Techniques for Unsaved Changes Detection in Angular

• When users edit data on a page, it's important to prevent them from accidentally losing their work if they navigate away (through clicks, browser refresh, or closing the tab).
• Angular provides mechanisms to detect unsaved changes and prompt users for confirmation before leaving.

Approaches:

1. Route Guards (CanDeactivate):

   • This is the recommended approach for Angular applications that use routing.
   • Create a service that implements the CanDeactivate<T> interface (where T is the component type).
   • Implement the canDeactivate() method:
     • Check if there are unsaved changes in the component (e.g., using a form's dirty state or a custom flag).
     • If there are changes, return boolean | Observable<boolean> that triggers a confirmation dialog using confirm().
     • Based on the user's confirmation (true/false), allow or prevent navigation.
   • Register the guard in the route configuration for components where you want to warn about unsaved changes:

   import { CanDeactivate } from '@angular/router';
   
   export interface HasUnsavedChanges {
     canDeactivate(): boolean | Observable<boolean>;
   }
   
   @Injectable({ providedIn: 'root' })
   export class UnsavedChangesGuard implements CanDeactivate<HasUnsavedChanges> {
     canDeactivate(component: HasUnsavedChanges): boolean | Observable<boolean> {
       if (component.canDeactivate()) {
         return true;
       }
       return confirm('Discard unsaved changes?');
     }
   }
   
   const routes: Routes = [
     {
       path: 'edit/:id',
       component: EditComponent,
       canDeactivate: [UnsavedChangesGuard]
     }
   ];
   

2. window.onbeforeunload Event:

   • This approach works for any navigation, including external links and browser actions.
   • Attach an event listener to window.onbeforeunload in your component.
   • Inside the event handler, check for unsaved changes and display a confirmation message using confirm().
   • Note: This method may not be reliable across all browsers, as some may prevent custom messages for security reasons.

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     template: `...`
   })
   export class MyComponent {
     @HostListener('window:beforeunload')
     canDeactivate(): Observable<boolean> | boolean {
       if (this.hasUnsavedChanges()) {
         return confirm('Discard unsaved changes?');
       }
       return true;
     }
   
     hasUnsavedChanges(): boolean {
       // Implement your logic to check for unsaved changes
     }
   }
   

Combining Approaches:

• You can combine both approaches for more comprehensive protection.
• The route guard handles in-app navigation, while window.onbeforeunload covers external links and browser actions.

Additional Considerations:

• Provide clear visual cues to indicate unsaved changes (e.g., asterisk in the page title).
• Offer options for users to save their work before leaving.
• Consider using a state management library like NgRx to manage unsaved changes across the application.

// unsaved-changes.guard.ts
import { CanDeactivate } from '@angular/router';

export interface HasUnsavedChanges {
  canDeactivate(): boolean | Observable<boolean>;
}

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<HasUnsavedChanges> {
  canDeactivate(component: HasUnsavedChanges): boolean | Observable<boolean> {
    if (component.canDeactivate()) {
      return true; // No unsaved changes, allow navigation
    }

    return confirm('Discard unsaved changes?'); // Prompt confirmation
  }
}

// edit.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-edit',
  template: `...`
})
export class EditComponent implements HasUnsavedChanges {
  hasUnsavedChanges = false; // Flag to track unsaved changes

  // Logic to update hasUnsavedChanges based on form or data changes

  canDeactivate(): boolean | Observable<boolean> {
    return !this.hasUnsavedChanges;
  }
}

// app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { EditComponent } from './edit.component';
import { UnsavedChangesGuard } from './unsaved-changes.guard';

const routes: Routes = [
  {
    path: 'edit/:id',
    component: EditComponent,
    canDeactivate: [UnsavedChangesGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// edit.component.ts (same file as above)
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-edit',
  template: `...`
})
export class EditComponent implements HasUnsavedChanges {
  hasUnsavedChanges = false;

  // Logic to update hasUnsavedChanges based on form or data changes

  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    if (this.hasUnsavedChanges) {
      return confirm('Discard unsaved changes?');
    }
    return true;
  }
}

1. Include the UnsavedChangesGuard in the routes where you want to warn about unsaved changes.
2. Implement the window.onbeforeunload event listener in your component for broader coverage.

Remember:

• Replace the placeholders (...) in the templates with your actual component content.
• Adapt the logic for checking hasUnsavedChanges based on your specific data or form state.

• If you're using a state management library like NgRx or NgXS, you can leverage it to manage the "unsaved changes" state centrally.
• Store a flag or object representing unsaved changes in the global state.
• Components can subscribe to this state and conditionally display a warning message or asterisk in the title when unsaved changes exist.
• Route guards can access the state to determine if navigation should be allowed.

This approach provides a more centralized and reactive way to handle unsaved changes across your application.

Dirty Forms in Reactive Forms:

• If you're using Angular's Reactive Forms, you can take advantage of the built-in dirty property of FormGroup and FormControl.
• This property indicates whether the form has been modified since its last initialization.
• Components can display a warning message or asterisk in the title based on the form's dirty state.
• Route guards can access the form and check its dirty property before allowing navigation.

This approach simplifies change detection for forms, but may not be suitable for situations beyond forms.

Custom Service for Tracking Changes:

• Create a service to manage the "unsaved changes" state.
• Components can call methods on this service to register for tracking changes (e.g., subscribing to an observable).
• Components can also update the service when changes occur in their data or forms.
• The service maintains a central flag or object representing unsaved changes.

This approach offers flexibility for tracking changes outside of forms, but requires more manual setup compared to state management libraries.

Choosing the Right Method:

• For most Angular applications, using Route Guards in conjunction with window.onbeforeunload is a robust and effective solution.
• Consider state management libraries if you already have one in place for centralized state management.
• Utilize dirty forms for simpler scenarios where the unsaved changes primarily relate to form modifications.
• Opt for a custom service if you need to track changes beyond forms and don't want to introduce a state management library.