CanDeactivate Route Guards with Angular
This Article helps you to Understand, How To Use CanDeactivate Route Guards with Angular?
The CanDeactivate guard differs slightly from other implementations in that the component to be deactivated must be supplied. This enables us to check for things like unsaved changes by probing the component in question.
now to make sure that if user tries to accidentally navigate away, then we prevent them doing so or at least ask them if he really wants to leave.
Using the CanDeactivate Route Guard
import { Observable } from "rxjs/Observable";
import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "@angular/router";
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
export class CanDeactivateGuard
implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(
component: CanComponentDeactivate,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
return component.canDeactivate();
}
}
Use Route Guard
In order to use them, route guards should be provided like services.so we have to register our Guard in app.module.ts
app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { AuthService } from "./auth.service";
import { AuthGuard } from "./auth-guard.service";
import { CanDeactivateGuard } from "./servers/edit-server/can-deactivate-guard.service";
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
ErrorPageComponent
],
imports: [BrowserModule, FormsModule, AppRoutingModule],
providers: [
ServersService,
AuthService,
AuthGuard,
CanDeactivateGuard
],
bootstrap: [AppComponent]
})
export class AppModule {}
Define Which Route should be Protected by these Guards
And then lastly, you’ll want to add the guard as part of your routing configuration.
app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { AuthGuard } from "./auth-guard.service";
import { ErrorPageComponent } from "./error-page/error-page.component";
import { DashboardComponent } from "./home/dashboard.component";
import { ServersComponent } from "./servers/servers.component";
import { ServerComponent } from "./servers/server/server.component";
import { EditServerComponent } from "./servers/edit-server/edit-server.component";
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard]
},
{
path: "servers",
canActivateChild: [AuthGuard],
component: ServersComponent,
children: [
{
path: ":id",
component: ServerComponent,
resolve: { server: ServerResolver }
},
{
path: ":id/edit",
component: EditServerComponent,
canDeactivate: [CanDeactivateGuard]
}
]
},
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
Implement this Guard in Component
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Params, Router } from "@angular/router";
import { ServersService } from "../servers.service";
import { CanComponentDeactivate } from "./can-deactivate-guard.service";
import { Observable } from "rxjs";
@Component({
selector: "app-edit-server",
templateUrl: "./edit-server.component.html",
styleUrls: ["./edit-server.component.css"]
})
export class EditServerComponent implements OnInit, CanComponentDeactivate {
server: { id: number; name: string; status: string };
serverName = "";
serverStatus = "";
allowEdit = false;
changesSaved = false;
constructor(
private serversService: ServersService,
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.queryParams.subscribe();
this.route.fragment.subscribe();
this.route.queryParams.subscribe((queryParams: Params) => {
this.allowEdit = queryParams["allowEdit"] === "1" ? true : false;
});
this.route.fragment.subscribe();
const id = +this.route.snapshot.params["id"];
this.server = this.serversService.getServer(id);
this.serverName = this.server.name;
this.serverStatus = this.server.status;
}
onUpdateServer() {
this.serversService.updateServer(this.server.id, {
name: this.serverName,
status: this.serverStatus
});
this.changesSaved = true;
this.router.navigate(["../"], { relativeTo: this.route });
}
canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
if (!this.allowEdit) {
return true;
}
if (
(this.serverName !== this.server.name ||
this.serverStatus !== this.server.status) &&
!this.changesSaved
) {
return confirm("Do you want to discard the changes?");
} else {
return true;
}
}
}
