asp.net core docker 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.

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
https://www.youtube.com/playlist?list...

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatAr...

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'
}
];

At this point, if you try to navigate away from the "create" route when the form is dirty you get the alert as expected. The browser back and forward buttons also prevent the navigation away from the "create" route.

CanDeactivate limitations : CanDeactivate guard does not prevent route deactivation
1. If you type a different url in the address bar directly OR
2. If you close the tab or the browser window OR
3. If you navigate to an external URL

asp.net core docker Angular route guards
200 Likes	200 Dislikes
36,291 views views	524K followers
Science & Technology	Upload TimePublished on 4 Apr 2018

Related keywords

tutorialspoint,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,tutorialspoint python,services briefcase,asp.net core web api,craigslist ny,server pro,server status ffxiv,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,services technologies gps,college football,server jobs,cvs,cnn,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,services.msc,asp.net core configuration,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,tutorialspoint spring boot,asp.net core middleware,services tag dell,