Angular 10 Tutorial #53 - Route Guards - Resolve Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 10 complete tutorial playlist for absolute beginners we are continuing to learn about angular routing and that specifically we are learning about the route guards and today we'll learn about resolve whenever we require some data that needs to be passed to a certain route or a view and we know for sure that it's kind of an expected data or you can also say that data is mandatory for that particular route we can always use resolve to send that data so i'll talk about that in detail along with some comparison to why we should not have it in ng on in it etc in this episode so let's get started this is part 53 of the angular 10 complete tutorial playlist i have planned around 100 tutorials and we have crossed the halfway mark there um so the playlist link and the video links are in the description box below make sure you check them out the notes and the code for the github link is also in the description box below make sure you check them out these are the topics that i've covered already in this particular series so make sure that you go through all the previous episodes so that you can learn and master angular 10. if you have any doubts in any of these topics that have covered please feel free to reach out to me and i will try and help you as much as i can all right so we have reached 53rd episode today and we are today we are learning about route cards resolve a quick note on route cards what are route cards route guards are used to secure the route paths route guards will help us prevent users from navigating to certain parts of an application without proper authorization route cards will always written as a true or a false true means the user can access the route false means he cannot access now there are four types of interfaces that are available in route cards can activate can activate child can load and can deactivate there's also one more which is called resolve right so if you want to perform some kind of data retrieval or you want to send some kind of data to a certain route before actually the route is activated that's where we'll use resolve we'll learn that now and that's the focus of this today's topic so resolve guard right so resolve guard allows us to provide data needed for a certain route to be activated right so when you say that you are sending certain route uh you're sending a user to a certain route you want some data to be sent before that route is activated right or i can say in a way that if there is some kind of a data right which is kind of mandatory or without which your route will not work right so try and keep that data in the resolve right and this i'm talking about even before you activate the route right so a lot of people get confused between resolve and ng on in it right so ng on in it works when you are in the route okay so once you launch the route and you are in that particular route current route is equal to activated route right that time energy on in it will be will be initiated whereas resolve is done even before you activate the route here so even before you go to that route data is activated and that is done to through through resolve okay so that was about the theoretical explanation let me explain you better with an example now let's get started so let me go to the code and what i'm going to do is i'm going to generate a new guard you can use any existing card as well no worries with that but i'm showing you fresh brand new how to do it okay so what we are going to do we are going to say um um resolver right i'm just giving some name you can give any name all right so here you see we don't see an option as a result right like i said it's not an interface as such so you can choose any interface okay so we got the resolver already there so i'm going to say share data okay get um i would say account info some some right some guard which will get us some information about the account alrighty so now we got the source we got the app and go to to account info guard dot ts right so here now you would see that we are going to change the very implementation right so here it says uh implements can activate right so instead what i'm going to do now is i'm going to implement a resolve right so it would import that here you see it imported resolve from angular router okay so now that there will be an error because you need to specify the type of it either we can use some kind of thing and if you have certain thing you can mention the type of it else i have given any okay for now that i'm saying that any is fine because any kind of data but if you are doing a strict data binding strict uh data typing so you can use like say user or type user or customer or anything the kind of api that you want to return now here we don't need this can activate because this is really not implementing or extending it right so here it will tell us you need to implement the interface resolve so resolve activated route router snapshot here it has not yet implemented it so what i'm going to do i'm going to say usually what happens in real time use cases is we will have a have a service you will call here call service api to get details right like for example you can do something like this code again i'm giving you pseudo code of what you would actually do in real time you would do something like this dot user service dot get account information right so you'll call a method you'll pass some user id and you would get that data and subscribe to it right and you would process the data here that you get using arrow method right so perfect okay so now what you'll do this is how you write your subscription and collect that data assume that we have done that right so let's say you made this api call and you got an object okay i'm going to call it user obj equal to and i received this data as a input when i made this http call then what you'll do let's say you have some id here and you can have some more and say okay oops right so you have got an of user object here and now i'm saying that this data needs to be sent to a route whichever is activated via this particular resolve right so i'm saying that whenever certain route is called i need to send this data right so what we'll do for that is we'll just return this user object as it is okay so what i'm saying that whenever i will call this particular interface routeguard interface which is resolve i will return this data okay clear so the job is done here now we need to go and get our routing file okay so let's say i have already done it here but let me do it again and show it to you some other element let's say let's take this leads right so what you'll do you will write resolve and here you will pass the guard name right so you can do something like resolve now pay attention here this is one of the common errors that people do a lot of times right you would end up putting square brackets it is not square it's an object okay it's an object it has key value so it has a key called data right data and then you would say account info guard so what you are saying here is whenever this path is trying to be loaded right resolve data is loaded is loaded before a route is activated okay so now if i'm trying to launch leads url leads route this would be resolved first then this route will be initiated okay so we got the uh resolve in place the resolve guard is returning us and user object here so far so good now let's go to this component and now what we'll do is we need to collect this value okay and how do we do that so we'll just inject okay so we have to inject two things one we have to inject the activated route okay so [Music] activated route let me copy it here and then so it would let's import it let's check the spelling a c t i v a t d okay activated route let's do one thing let's import it here activated route at the rate angle slash router okay so activated routines i have created an instance of it so now on ng on it what i will say is console.log this dot activated route dot snapshot dot you would see a parameter called data right this is the same data that we sent here in the app routing see here we are sending data and it is account info guard so whatever is returned here will be the data that is sent over to this particular component which is our leads right sorry leads there are too many leads okay uh let's just navigate from the routing okay so leads grid okay sorry about that so leads grid component okay leads grid component where is it mapped let's just check here leads grid component the path is leads okay all right so in the leads grid we are just console logging the data that we will receive from the route here from the account info guard let's run this and see it okay so let's jeez so okay now let's go to the application let's give it one quick minute to compile if you have any doubts drop me in the comment section your queries your doubts i will try and help you as much as i can okay so here we got the application compile let's go to our application refresh okay so now let's do slash leads and we see leads grid work now let's go here and we see that the object is printed here okay so you see here user id username that's coming up here so our data is exactly the one that we passed from our resolve guard and we are seeing it in the console lock right that means that we have sent some data and the data is now reflected in our component right so even before we launch it is now activating the route afterwards first it is resolving the data right that is what is resolved guard in angular give it a try and let me know if you have any questions in the next episode i will start with angular forms very very interesting topic because there is so much to do in forms there are so many use cases that we can do i look forward to for you to join me in that class as well and it's going to be a lot of fun if you have any questions any use cases that you want me to particularly attempt please do let me know i'll be happy to do that thank you so much for joining see you in the next episode where we will learn about angular forms thank you again

Channel: ARC Tutorials

Views: 4,352

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 route guard resolve tutorial, angular 11

Id: a4JEZvBwBlo

Length: 13min 48sec (828 seconds)

Published: Tue Jan 19 2021