Angular 10 Tutorial #50 - Route Guards - CanActivateChild | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners we are continuing to learn about the angular routing and in that especially we are learning about the route guards in the last episode we learned about can activate interface today we are going to learn about can activate child interface it's pretty much similar to what can activate does but with a twist that it is applied to the child routes each and every child route we'll learn all about it in today's episode welcome back friends this is part 50 of the angular 10 complete tutorial playlist the playlist link the corresponding videos are in the description box below i make notes in every episode that notes i've made that available in the github link which is also in the description box below make sure you check it out i have planned around 100 tutorials for you so make sure you subscribe to my channel and please if you have any doubts ask me in the comments section that being said these are all the topics that i've already covered as part of this particular playlist make sure you check them out they are in detail along with notes and everything so which will really help you today we are in our 50th episode and we are learning about can activate child so a quick note for our viewers who are joining us new what is routing and route cards so routeguards help us prevent helps us with preventing users to accessing a certain route right so it's like a check that we put whether user can access a certain route or not route cards will return us with a boolean value which is either a true or a false if the value returned is true based on the conditions that we will write the user can access the routes if the value returns false the user will not be able to access that particular route or a corresponding child's or components related to that that's an overview of route cards make sure you check it out the previous episodes that i have covered in detail about it so how do you generate a route card you generate using ng generate guard followed by the guard name there are four main interfaces like can activate can activate child can load and can deactivate today we are learning about can activate child so what does can activate child do it works very similar to can activate guard but the difference is this guard which is connect with child will be run before each child route is activated i'll repeat that statement for you again can activate child will be checked will be run before you access each child route that is activated right so make sure that whenever you are working uh you need to have uh that if if there is any changes in the logic right uh this particular check will be captured okay so that's a pretty much overview let's see that in the hands-on activity and that would give you a complete picture let's get started so i have my application here let's do ng server going to do everything from scratch to so that i can help you build it okay so what we are going to do is let's create some components crm and then this we will say ng generate component admin right so what i'm doing i'm generating a new component by the name admin right okay so since we have more than one modules i'm going to use skip import option so this will just generate the component but will not import it into any module so i got the admin component similarly i'm going to say admin hyphen edit right so this will again generate a component similarly i'll generate admin hyphen delete admin hyphen users or say manage or some preferences settings whatever you want to call it the idea is i'm trying to create a main component and then child components you can do that using module also that i'll cover it in the next episode right the next episode is dedicated to that so let's start with the first one first we are saying whenever the path is admin right it should it should say can activate and what's so we need a guard right for that so let's generate that also ng generate guard and i'm going to call it um super admin for any any name you can give so this is one card which will be the main one which is can activate that's number one i'm going to create one more and i'm going to say admin access okay so what this will do is check for the client routes and the interface i'm going to implement in this is the can activate child right so you can use the up arrow down arrow to move here and click on white space to select that and hit enter and you get the guards generated so now for the admin guard we are saying it should be super admin card it's who can access this route only who is a super admin or an admin right that's number one so then what we are going to show we are going to say this uh the component that belongs to this is admin component okay so let's this is similar to what we learned last episode but i'm going to make it a little twist here so let's check that out okay so let's go to our application and try admin it says admin works because our guard is returning true if you make it false you cannot access it now alrighty so what it means is that the the the can activate guard should return true to access this route right now let's create the child route so what we are going to do is here say children put that add a path and say that whenever it is access admin admin component okay and i'm going to remove the component here because we don't need it okay so what we need is we need path and we need can activate so here i'm saying whenever the path is admin and component is this check for uh this route that is super admin guard should allow and then when it's this access the admin component now i'm going to add the child components so here what i'm going to say i'm going to say path okay let's say um here we are going to add some more child components in the children i'm going to add few more which is going to say path is manage and your component should be admin manage component okay and since we need all of this into a binding right we need all of this into a binding so what i'm going to do is bind it again into a separate in its own i would say the path right so let's do that and we will say path and actually i can write it in the same lines because it's crisp right so we can do that like this okay similarly add a couple of more child routes to this and i'm going to call it edit i'm going to call it delete this will be admin edit this will be admin delete component so what do we got here we we are saying whenever it is admin right and it should now i can also do this you see here i'm saying path is like this and i can add can activate child okay and here i'm going to mention the child route which is admin access guard right so see here carefully now i have a path and i'm saying admin who is trying to access it it says whoever is super admin can use it and should access this component and i can also use something like this this is also a correct combination okay so if i put like this here what i'm saying whenever whoever wants to activate admin to activate child he needs admin access card right that's the children that we have defined and the path let's test this so here i'm saying admin so it says admin works so now we will configure a path and say manage now it says admin manage works let's go and make this false and see what happens so i am not able to access the manage let's see admin i'm not so let's move this up right so we are going to move it up and say whenever we are trying to access this admin route it should be can activate and admin it is still is it false or is it true admin access is false so make it true all right and so here we are going to add some more so this would be the children of it right so we got all the children that got mapped so now let's create here one path and and here we will say children and put an array and move them inside right because we want them inside of it so there is little refactoring under i'll explain you this code in just a bit wait to that so here we are just mentioning path children so we got this path and we are going to say can activate child and put it here right and we got the can activate super admin it has children which is this default component and inside that can activate child and children now let's try this out so first we are going to try admin uh is it true is it false it's true and here we got the path admin it comes to admin component and children and path need to give a path here empty path all right perfect so now admin works slash manage now it says admin vantage so now let's go ahead and make it false it might look look a little confusing initially but trust me it's not so now you see admin is working because we got the can activate correct so see this is returning true take a look at it i'm going to take a minute i'll explain you what is happening here so this is our entire route that we created the first is the main path which is admin and i'm saying who can access that whoever is a super admin guard passes the output of this guard is true that's why you can access admin it will come here and it will check yeah it matches admin so it goes here and again i'm creating a path and i'm saying if the path is this who can activate a child only admin access guard can activate these routes right so that's why see admin access guard is false that's why you cannot access manage okay but admin you can because he is a super admin right see the difference you can access admin because this is true but you cannot access these child routes because this is false now let me make this also true right so now you can access all the routes which are the child routes admin manage works admin edit works and admin delete works right so pretty simple um so make sure that you create two sometimes what people make a mistake is they will move this right here at the top like this it will not work it will not work okay for the obvious reason because it cannot process both in one okay and also remember that you don't give component here if you give that your output will always be admin a component let me show you that if you do this it is always going to map if you do this and expect it to work it will not it will always say admin work see in the delete also it is saying admin works similarly in the manage also it will say admin works because you have given the component admin component here so what is the work around you need to add one more path like this inside the children and define one path for admin component and one path for all the childs and then give can activate child this is for the top level parent route can activate child is for the child routes okay take take good look at it understand ask me if you have any doubts i'm here to help you all right in the next episode i will continue uh with the next one i'll the interface is can load so i'll show you that because that is how you block modules so that it's improve security as well as make sure that only genuine users can access those modules join me in the next episode if you like my work and tutorials please do consider buying me a coffee at buy me a coffee.com arc tutorials thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 4,600

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular CanActivateChild

Id: zgrrWsMXqMU

Length: 15min 29sec (929 seconds)

Published: Fri Jan 15 2021