Angular read route parameters

this is putt 41 of Angela Claddagh tutorial in its video we will discuss how to read route parameter values in angular 2 and later versions let's understand this with an example at the moment our list employees component displays the list of all available employees and when we click on any employee that specific employee ID is passed in the URL as a road parameter now what we want to be able to do is read the employee ID from the URL and then retrieve that specific employee details using our employee service and then display those details right here now if we take a look at our employee service notice we have this get employees method which returns us the list of all available employees now we want another method which is going to return us employee by ID so let's make a copy of this and then change the bits that are required first of all the name of the method is going to be get employee and it's going to return a single employee and not an array and we want to pass this method the ID of the employee that we want and then to get that employee by ID we are going to use the fine method we want an employee whose ID equals the ID that we are passing in and notice here we are using triple equals to check both for the value and the type so this completes the change required in our employee service next from our employee details component we want to read this route parameter value reading route parameters is easy angular provides a service for that and that service is called activated route service so for us to be able to use that service will have to first import it so let's import activated route service from angular router package now to be able to use this activated route service will have to first inject it into a component using the component constructor so let's create a private field I'm going to name it underscore route and the type of this is activated route which we have just imported now using this private field underscore route we can very easily read the route parameter values we are going to do that within this ng on a net lifecycle hub we have discussed lifecycle hooks in detail in our angular 2 course so if you're new to lifecycle hooks please check out our angular 2 course I'll have the link available in the description of this video now let's use this private field underscore route to read the route parameter values notice when I press dot on the route object we have this property params and if I have the mouse over this params property notice what it returns it is actually returning an observable so one way to read the load parameter values is by subscribing to this absorber we'll discuss this observable approach in our next video in this video we'll discuss the other approach and that approach is the snapshot approach notice now when I type dot on the route object we have another property and that property is the snapshot property and on this we have the params property so now to be able to read this route parameter value we have to specify its name remember when we defined this route in our route module file that is an AB dot module dot ts file we specify the name of this route parameter as ID so we have to use the same name to read that parameter value so back in our employee details component we specify the name of the parameter as ID right here and by default this is going to return the value as a string so we need to convert that to a number we do that by using the plus symbol and then let's create a constant and store the parameter value in that constant now let's use this ID and retrieve that specific employee details using our employee service so we need to inject our employee service also into a component class let's do that within our constructor I'm going to name the private field underscore employee service and the type of this is employee service we don't have this service imported yet and that's the reason we see that red squiggle we can take the help of Visual Studio code editor to automatically include the required import statement for us we do that by pressing the ctrl + period Keys simultaneously notice now we have this import option right here when I click on this the required import statement is automatically included right here and also notice the red squiggle has disappeared now let's use this employee service to retrieve employee by ID we know the service has caught ket employee method we need to pass it the ID of the employee we have that in this constant so let's pass that and this method is going to return us an employee so within our component let's create a property I'm going to name it employee and the type of this is employee again we don't have this type so let's import the employee type and we are going to store the employee returned by our service in this employee property now if we take a look at what our employee details component is doing it's simply displaying this message an employee details works at the moment we are able to read the ID value from the URL and we are also able to retrieve that specific employee details all that is left to do is display the employee details now to speed things up I'm going to reuse the HTML and CSS we have in our display employee component let's paste this HTML within our employee details component view template so instead of employee details works let's replace that where the HTML we have just copied and notice it's binding to the employee property and within our employee details component class we already have the employee property now let's say all our changes and see what we get notice the image is too big this is because we are missing some of the styles will copy those styles in just a bit but before that let's quickly test our application to make sure it works as expected when I click on mark whose ID is 1 the ID is passed correctly in the URL we see my details is expected similarly when I click on John John's ID is 3 and we also see John's details now let's copy those styles let's copy the styles from display employee component CSS file and paste them within our employee details component CSS file notice now the image size is reduced as expected now let's include a footer for this bootstrap panel and in the footer let's include back to list button let's open our employee details component view template and we have our panel body div right here after the panel body we want panel footer suggest after panel body div let's include another development and to get a panel footer all we have to do is include the bootstrap class panel - footer instead of using a button I'm going to use an anchor element and style it using bootstrap button classes BTN and BTN - primary and the text 1 this is going to say back to list and when we click on this link what do we want to do we want to take the user back to the list page so let's use the router link directive and bind it to the list route notice now we have back to list link then we click this it takes us back to the list now one question that might come to your mind is why are we not using square brackets when we are using the arrow telling directive well that's because if we are binding to a simple string like this we don't need to use the square brackets we need to use these square brackets when we are binding this directive to link parameters array like this or if we are binding to a property within a component class since now we are binding to the link parameters array we have to use the square brackets if we don't use the square brackets then it doesn't work so in angular to read route parameter values there are two options we can either use the snapshot approach or the observable approach in this video we discuss the snapshot approach in our next video we will discuss the observable approach if you are using angular 2 in your project then use params property as shown right here on the other hand if you're using angular for angular 5 or even future versions they introduced a new property called param map params have been deprecated since angler 4 so if you're using angular for or any version beyond it use per am map property instead of params at the moment in our project they using angular 5 so let's use param map instead of params so let's replace params with parameter map has caught get method and to the get method we passed the name of our road parameter which is ID notice even now our application works exactly the same way as before that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 30,217

Keywords: angular 5 parammap, angular 2 router snapshot, angular 4 router snapshot, angular 5 router snapshot, angular 5 router snapshot parammap, angular 5 router params, angular 2 read route parameters, angular 4 read route parameters, angular 5 read route parameters, angular 5 read routeparams, angular 2 read routeparams, angular 4 read routeparams

Id: 3r43-VITWrU

Length: 10min 22sec (622 seconds)

Published: Wed Apr 11 2018