CanDeactivate Guard in Angular

The CanDeactivate guard in Angular is used to prevent users from leaving a route if there are unsaved changes. This tutorial covers the basics of setting up and using the CanDeactivate guard effectively in your Angular applications.

Setting Up CanDeactivate Guard

To set up the CanDeactivate guard, you need to create a guard service and implement the CanDeactivate interface:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { EditComponent } from './edit/edit.component';
import { UnsavedChangesGuard } from './unsaved-changes.guard';

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

@NgModule({
  declarations: [AppComponent, HomeComponent, EditComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [UnsavedChangesGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

// unsaved-changes.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { EditComponent } from './edit/edit.component';

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate {
  canDeactivate(component: EditComponent): boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }
}

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

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

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

@Component({
  selector: 'app-edit',
  template: `
    
Edit Component
    

      
      Save Changes
    
  `,
})
export class EditComponent {
  unsavedChanges = true;

  hasUnsavedChanges(): boolean {
    return this.unsavedChanges;
  }

  saveChanges() {
    this.unsavedChanges = false;
    // Save changes logic here
  }
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Creating a Guard Service

Create a guard service using the Angular CLI command ng generate guard unsaved-changes and implement the CanDeactivate interface:

// unsaved-changes.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { EditComponent } from './edit/edit.component';

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate {
  canDeactivate(component: EditComponent): boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }
}

Using the CanDeactivate Guard

Use the canDeactivate property in your route configuration to protect the routes:

// app.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] }
];

Key Points

Conclusion

The CanDeactivate guard in Angular provides a powerful way to prevent users from leaving a route if there are unsaved changes. By understanding and using the CanDeactivate guard effectively, you can create secure and user-friendly applications with protected routes. Happy coding!