Angular route guards 

In this video we will discuss CanDeactivate route guard in Angular. We will also discuss how to access angular template reference variable in component class.
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Text version of the video
csharp-video-tutorials.blogspo...
Slides
csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
ru-vid.com...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
A routing guard called CanDeactivate can help us achieve this very easily. The following table has the common routing guards and their purpose.
Route Guard Use
------------------ --------------------------------------------
CanDeactivate Guard navigation away from the current route
CanActivate Guard navigation to a route
CanActivateChild Guard navigation to a child route
CanLoad Guard navigation to a feature module loaded asynchronously
Resolve Perform route data retrieval before route activation
We will discuss each of these routing guards with an example in our upcoming videos. In this video we will discuss CanDeactivate guard.
There are 3 steps to use a routing guard in Angular.
1. Build the route guard
2. Register the guard with angular dependency injection system
3. Tie the guard to a route
Building the route guard : A route guard can be implemented as a function or a service. In this video let's create a service. In our upcoming videos we will discuss creating a function.
Create a new file, in the employees folder. Name it create-employee-can-deactivate-gaurd.service.ts. Copy and paste the following code.
export class CreateEmployeeCanDeactivateGuardService
implements CanDeactivate<CreateEmployeeComponent> {
canDeactivate(component: CreateEmployeeComponent): boolean {
if (component.createEmployeeForm.dirty) {
return confirm('Are you sure you want to discard your changes?');
}
return true;
}
}
Code Explanation :
1. Since we are implementing the routing guard as a service, decorate the guard class with @Injectable() decorator.
2. Since we want to implement CanDeactivate routing guard, make the guard class implement CanDeactivate interface.
3. CanDeactivate interface supports generics. In our case, since we are creating a guard for CreateEmployeeComponent, we have specified CreateEmployeeComponent as the argument for the generic type of CanDeactivate interface.
4. CanDeactivate interface has one method called canDeactivate(). Our routing guard class needs to provide implementation for this interface method.
5. canDeactivate() method returns true or false. True to allow navigation away from the route. False to prevent navigation.
6. The first parameter that is passed to the canDeactivate() method is the CreateEmployeeComponent. We are using this parameter to check if the component is dirty. If it is dirty, we are triggering JavaScript confirm dialog to the user.
How to check if the form is dirty : Include the following line of code in CreateEmployeeComponent class
@ViewChild('employeeForm') public createEmployeeForm: NgForm;
@ViewChild() decorator provides access to the NgForm directive in the component class. employeeForm which is passed as the selector to the @ViewChild() decorator is the form template reference variable.
The public property "createEmployeeForm" is used to check if the form is dirty.
Register the guard with angular dependency injection system : Since the routing guard is implemented as a service, we need to register it in a module.
@NgModule({
declarations: […
],
imports: […
],
providers: [CreateEmployeeCanDeactivateGuardService],
bootstrap: [AppComponent]
})
export class AppModule { }
Tie the guard to a route : Using the route guard, we want to prevent navigating away from the "create" route, so tie the route guard with the "create" route in app.module.ts file as shown below.
const appRoutes: Routes = [
{
path: 'list', component: ListEmployeesComponent
},
{
path: 'create',
component: CreateEmployeeComponent,
canDeactivate: [CreateEmployeeCanDeactivateGuardService]
},
{
path: '', redirectTo: '/list', pathMatch: 'full'
}
];

Наука