Angular route guards

this is part 39 of Angela credit tutorial in this video we will discuss why route cuts are required in general and an example of can deactivate route guard first let's understand why route cuts are required consider the screed employee data entry form this is a pretty big form I felt almost all the fields on this form assumed at this point I accidentally clicked either on the list link or on the browser back button imagine what's gonna happen the application immediately redirects us to the list route and as a result we lose all our data on the create employee form it would have been much better if the application displayed a confirmation like this are you sure you want to discard your changes once I click OK the application discards the changes and allows the route navigation to move to the list route on the other hand if the user clicks cancel then the application cancels route navigation we stay on the create route and we still have the data on the screen employee form this can be very easily achieved using a road cut called can deactivate in angular we've got several route cards let's quickly look at one by one and what each candle can deactivate god navigation away from the current route can activate god navigation to air out can activate child god navigation to a child route can load god navigation to a feature module loaded asynchronously and finally resolved performed route data retrieval before route activation we'll discuss all these cards with examples in our upcoming videos in this video we'll look at implementing can deactivate route card there are three simple steps to use a route card first we build the route card next we register the guard with the angular dependency injection system and finally tie the guard to a route that we want to protect let's look at these three steps in action one by one we won't the code for our guard to be present in its own file so to this employees folder I'm going to add a new file now we are implementing this God for our Creed employee form so I'm going to name this file create employee and we are at the moment implementing can deactivate guard so I'm also going to append can deactivate guard and a guard is implemented as a service so I am also going to append dot service and this a type script file so let's also append dot TS file extension a guard service is nothing but a class so the first thing that I'm going to do is create a class I'm going to name this class Creed employee can deactivate guard service now each guard in angular has its own interface for example can deactivate guard has its own interface called can deactivate similarly can activate has can activate interface so on and so forth so let's make up a guard class service implement can deactivate interface this interface supports generics we are implementing this can deactivate God for our Creed employee component so let's specify create employee component as the generic argument we don't have both of these types that is can deactivate and create employee component so let's include the required import statements to import both of them this can deactivate interface has got one method since our class is implementing that interface the class has to provide implementation for the interface method so let's right click on can deactivate interface and go to its definition and if we look at the method it has God notice it also has the same name as that of the interface the only difference is the method name starts with a lowercase e whereas the interface name starts with a capital letter C now let's copy the definition of this method paste it within our service class and then we'll change the bits that are required notice this method has got three parameters for our implementation we don't need all the three parameter we only need this first parameter so to keep it simple let's delete the rest of the two parameters notice the first parameter that is coming into this can deactivate method is the component for which we are implementing this can deactivate guard in our case the component is create employee component so let's specify the type as create an employee component look at the return type this method can either return an observable of boolean a promise of boolean or simply a boolean again to keep this method simple I'm going to delete the observable and promise now if you want this guard service to allow route navigation and navigate to the new route then return true from this method on the other hand if you want to cancel the route navigation and stay on the current route then return false in our case if our create employee form is dirty meaning if we have some data entered on the form and if we accidentally click either on this list link or on the browser back our forward buttons we want the route navigation to be canceled so at that point we want to return false from this method on the other hand if this form is not dirty meaning we have not entered anything then we want to return true meaning we want to allow route navigation so the question is how to check if this create employee form history well if you look at this can deactivate method notice the create employee component for which we are implementing this can deactivate guard is being passed in as a parameter so within this create employee component if we have a public property which helps us determine if the component is dirty or not then our problem is solved now if we take a look at our create employee component view template notice right here we are creating a template reference variable by exporting the ng form directive remember this entry form directive has caught dirty property which helps us check if our paid employee form is dirty or not but at the moment don't have access to this ng form detective within the component class now to be able to access this ng form directive in the component class we use that view child decorator so within the component class let's use at view child decorator to this pad View child a decorator we pass the name of the template reference variable as the selector now if we take a look at the beauty and played the name of the template reference variable is employee form so let's copy that and specify it as the selector for our at-will child detonator and we want to create a public property within our component class we can give this property any meaningful name we want I'm going to name it create employee form and this is going to be of type ng form because that's what we are exporting into this template reference variable here we use a lowercase n but whereas within our component class we use a capital letter and so now within our component class we have this great employee form which we can use to check if the form is dirty or not this is a public property so we can even access it within our guard service so within they can deactivate method we can check if the component create employee form is dirty if the form is dirty we want to present the user with the JavaScript confirmation and the message is are you sure you want to discard your changes on the other hand if the employee form is not dirty we want to allow the navigation without any confirmation so we simply return true now since this guard class is implemented as a service it's a good practice to definitely service class with AD injectable decorator irrespective of whether that service has injected dependencies or not so first let's import injectable from angle echo and decorate the service class wear this at inject later all right this concludes our first step that is building the guard service the next step is to register our guard service with the angular dependency injection system so to be able to use this guard service we need to register it in a module at a moment in our application we have only one module and that's the route module app module which is in this file app dot module tortillas so let's first import our guard service and then registred using the providers property of this @ng module decorator finally we need to tie our guard to air out in our case we want to tie the guard to this create route so first let's format this a bit we want candy activate guard so we use can deactivate property and this is an array meaning we can add more than one guard but in our case we only have one god and that is our create employee can deactivate guard service so let's save all our changes and then take a look at the browser now let's make this form dirty at this point if we click on this list link notice we get our JavaScript confirmation are you sure you want to discard your changes if I click cancel the route navigation is canceled and we stay on our create employee form on the other hand if I click OK the changes are discarded and we are navigated to the list route the browser back and forward buttons also work exactly the same way notice when the form is dirty and when we click on the browser back button we still get our JavaScript confirmation when I click cancel we stay on the current route and when I click OK we go back to the list route there are some limitations of this can deactivate guard that we need to be aware of the scan the activate card does not work if we type the URL in the address bar directly let me show you in action what I mean we're on the create route let me make this form dirty and at this point it we type directly in the address bar notice the candy activate card is not working in this case this candy activate card will also not work if we close the browser that's good to create route let's make the form dirty and at this point if we close the browser vendor notice our guard does not work this guard also does not work when navigating to an external URL like dell.com microsoft.com google.com etc let's start our server one more time now in the navigation menu right here let's include a link to an external website our navigation menu is in the view template of our root component app component so within the app component just after our create link let's include a link to presume tech website and instead of using router link directive let's use the href attribute and we want to navigate to presume Tech dot-com website notice in the navigation menu we have the presume Tech link now let's navigate to the create route make the forum dirty and at this point when we click on regime tech link notice how our Road car does not work so three simple steps to implement a route card in your application the first tab is to build the route card service itself next register the route card with the angular dependency injection system and finally tie the guard to a route that you want to protect that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 71,154

Keywords: angular candeactivate, angular detect unsaved changes, angular unsaved warning, angular candeactivate example, angular 2 candeactivate example, angular 2 route guard, angular 4 route guard, angular 4 candeactivate guard, angular 4 candeactivate example, angular 5 route guard, angular 5 candeactivate, angular unsaved changes

Id: WveRq-tlb6I

Length: 12min 46sec (766 seconds)

Published: Wed Apr 04 2018