Resolve Route Guard in Angular | Angular Routing | Angular 13+

in this lecture you're going to learn about resolve route guard in angular and where can we use it so the resolve route guard allows us to load the data before we navigate to a route let's understand this with an example so in this angular application we have this courses component and inside this view we are displaying a list of courses now this course list is coming from a service file so if i go to vs code inside this app folder we have this services folder and inside this services folder we have this courses service and inside this courses service we have this courses array and we are using this courses array inside this courses component so if i open this courses component class you can see that in this courses component class we have this courses property and to this courses property we are assigning the courses array of this courses service okay and then we are displaying it in the web page now let's say instead of getting this courses list from a service class we are getting this courses list from a server now when we request some data from a server the server sends us the response with the data which we have requested for and the response might take some time to arrive at client so let's say when we request this courses list from the server it will take five seconds to reach to the client let's simulate that situation so let's go back to vs code and let's open this courses service now inside this courses service let's go ahead and let's create a method and let's call this method get all courses okay and inside this method let's create a new promise okay and let's assign this promise to a variable so let's create a variable using this const keyword and let's call it maybe course list now to this promise constructor it receives a callback function it expects a callback function and this callback function receives two parameters the first parameter or the first argument is the result callback function and the second argument is the reject callback function and inside the body of this callback function we can write some logic so what i'm going to do is here i'm going to use settimeout function and this set timeout function takes two argument the first argument is again a callback function and the second argument is the time interval so here for the time interval let's specify 5000 milliseconds that means 5 seconds so after this time interval the callback function which we have passed to the set timeout function will get executed right and inside this callback function inside the body of this callback function let's simply call this resolve method and from here we want to emit this course list so basically we want to emit this courses array so let's say this dot co says okay so this promise will get resolved after 5000 milliseconds and when this promise will get resolved it will emit this course's array let's also return this promise from this get all courses method okay let's see if the change is here all right now let's go to courses component now instead of assigning this courses array from this courses service directly to this courses property of this courses component class let's call this get all courses method of this courses service okay so let's say this dot courses service so we are injecting an instance of this courses service here and this courses service has this get all courses method now this method is returning a promise so on this method we can call then method and this then method will get called when the promise which this get all courses is returning gets resolved and this then method also takes a callback function and this callback function will receive the resolved data so let's simply call it data and what we want to do is inside the body of this callback function the callback function which we are passing to this 10 method we want to set this dot courses to this data okay now here we have an error and this error is because here we need to specify a type for the data which this get all courses method will return so here i will simply specify any but what you can also do is you can create a model class called course and that course model class will have this id this name this author this duration and all these properties and then you can specify the type of these courses as that course class so the model class which you have created and then from this method you can return an array of that course class so you can say something like this okay now i have not created this course model because here i want to keep things simple so i will simply use any but you can also create a model class all right with this let's save the changes let's go to the web page and now let's click on this courses link so when i click on this courses link and instance of this courses component will be created and initially you will see that in that view it is not displaying any data for five seconds and after five seconds only it is displaying the list of courses so let's see that once again so again when i click on this courses link you will see that that component is not displaying the list of courses for five seconds it is only displaying the list of courses after five seconds because this promise you know the promise which we are returning from this get all courses method it will get resolved after five seconds and after five seconds only the data will be available this course list will be available and that will be assigned to this courses property okay so the problem here is for the five seconds when the data is not available this view is displaying an empty page and it is only displaying the content of this page after five seconds when the data is available now if the server takes more time in sending the response in that case it will be empty this view will be empty for that much time interval and we don't want to show such behavior to our end user so what we want is when we navigate to this courses page once the data is available then only it should display the view of this courses component okay so basically when i click on this courses link it should wait for five seconds and once the data is available then only it should display the view of this course's component and for that we can make use of resolve route card let's see how to do that let's go back to vs code and what i'm going to do is inside this app folder i'm going to create a new file and let's call this file course resolve service okay and since it is a typescript file we need to use dot ds extension and inside this file let's create a class let's call it course resolve service and let's also export this class okay now we want to use resolve route card so for that we need to make this service implement the resolve interface so let's use this implements keyword and we want to implement resolve interface and this interface is provided by angular slash router and this interface is of generic type so here we also need to specify a type so if you have created the course model class then here you can specify course but since i have not created this model class i will simply use any here okay so here my main intention is to show you how a resolve route card works all right now since we are implementing this resolve interface this resolve interface provides a method called resolve and we also need to implement that method so let's go ahead and let's implement that method and this method takes two parameters the first parameter is of type activated route snapshot and the second parameter is of type router state snapshot and unlike other route cards this resolve method is going to return some data okay it is not going to return a boolean value it is going to return some data now what data do we want to return from here we want to return this courses array okay so for that we need an instance of this courses service inside this course result service okay so for that let's specify a constructor here and to this constructor let's create a private parameter let's call it courses service and it is going to be of type courses service okay and since we want to use one service inside another service we also need to decorate this service with at injectable decorator all right and in order to use this at injectable decorator we also need to import it from angular slash go all right now from within this resolve method let's call this courses service on this courses service we have this get all courses method and this method is going to return a promise right so on that promise let's use then method which will be called when this promise will resolve and this then method takes a callback function this callback function is going to receive the data which the promise has returned and then we simply want to return that data from this callback function okay this callback function so here let's say return data and whatever value this 10 method is going to return we also want to return that from this resolve method so here also let's use this return keyword okay so this 10 method is going to return this data now this data is going to contain this courses because that's what this promise is going to return right so from this then method that data will be returned and again we want to return that data from this resolve method so again we are using this return keyword okay so our course results service is ready now let's go ahead and let's provide this service from app module so here let me move it to a separate line so that it will be more readable and here let's specify this service name so what is the service name it is course resolve service and in order to use this service we also need to import it and finally let's go to this app routing module and we want to use the resolve guard on this route okay so the route for this courses page so on this route let's specify a property which is resolve okay and to this property we can assign an object and inside this object we can specify a property let's call that property courses now you can name this property anything and to this property we can assign the service which is implementing the resolve interface so in our example this course results service is implementing this result interface so let's assign that course results service to this property and in order to use this property we also need to import it so here what will happen is from this service we have this resolve method and this resolve method is going to return some data right it is going to return the courses array and that courses array will be assigned to this courses property okay so the activated route object will have a courses property which will store the list of courses which this resolve method has returned so let's see how to retrieve that value so for that let's go to courses component and let me comment this code here okay and to retrieve the value of this course's property from the active route we need an instance of the activated route class so we want angular to inject that instance so for that let's create a private parameter let's call it may be route and it should be of type activated route okay now let's access the instance of this activated route for that let's say this dot route dot and this route has this snapshot property and the snapshot property has a data property and what does this data property turn you can see it returns the static and resolved data of this route okay so to get the result data we can use the square brackets and because we can specify the property name so the property name here we have specified as courses so let's copy this property name and let's pass it here okay and in this property we are storing the list of courses and we want to assign that list of courses to this courses property of this courses component class so let's say this dot courses equals the value stored in this courses property with this let's save the changes let's go to the web page and now let's click on this courses link and notice what happens here i have clicked on this courses link and i'm still not navigated to the courses page and now i am navigated to this courses page after five seconds when the data was available let's see that one more time so let's go to home page and let's click on this courses link so for five seconds we are still in the home page and after five seconds when the data is available then only we are redirected to this courses page and this is the use of resolve route card the resolved route card allows us to load some data before it navigates us to the route we can use resolve route cards on the routes or the components which is requesting some data from the back end and when the data is ready and available then only this resolve route card will show us the view of that route or that component

Channel: procademy

Views: 12,987

Keywords: resolve, route guard, angular resolver, angular, angular tutorial, complete angular course

Id: 5szUEstowGY

Length: 16min 39sec (999 seconds)

Published: Wed Mar 23 2022