Angular route params

that says pad 40 of Angela credit tutorial in this video we will discuss creating a route with parameters and activating that route so here is what we want to do at the moment on our list page we are displaying the list of employees each employee details are being displayed by this bootstrap panel that we have right here and here is what we want to do when we click anywhere on this bootstrap panel we want to redirect to another page which is going to display that specific employee details at the moment we don't have this employee details component so to speed things up let's use angular CLI and generate this new component and here is the angular CLI command to generate our new component ng for angular CLI itself G for generate C for component and let's name our component employee details and we want this new component to be placed in this employee's folder along with the other components so let's prefix the folder name and then we want this employee details component to be generated flat within the employees folder and we don't want a dedicated folder of its own so I'm going to include the flat option and finally we also do not want any spec files to be generated so let's also use the no spec option and let's use the dry run flag to see what we get if you are new to angular CLI please check out our angular CLI course I have the link to the course in the description of this video if you want to check that out later now let's execute this command without the dry run option so the component is generated notice the angular CLI not only generated they required a component files it has also updated the root module to import and declare our new component employee details component notice in the employees folder we have the employee details component files now if we take a look at the root module file notice we have the import statement to import employee details component and it is also included in the declarations array so here is what we want to do when we click anywhere on this employee panel we want to redirect the user to another route that looks like this employees four slash the ID of the employee for example if I click on this employee panel and at this employee ID is one then we want to pass one in the URL like that if I click on meri and if her employee ID is two then we want to pass her ID in the URL like that so first we need to create this route so in our route module file which contains all our application routes let's include a route with parameters I'm going to make a copy of this round now we want our route to look like this employees four slash and then the ID of the employee this ID of the employee changes depending on the employee panel that we have clicked on so we need a parameter right here and the wavy include parameters in angular is like this employees this is the bit that does not change and then to specify a parameter we include a four slash colon and then the name of the parameter in our case a passing employee ID so I'm going to name the parameter ID we can give it any meaningful name we want at the moment in this route definition we have only one parameter but there's nothing stopping us from including as many parameters as you want for example if we want to pass another parameter we include another four slash another colon and then the name of the new parameter let's say for example we want to pass gender along with the ID we specify the name of the parameter like that in our case we want to pass only one parameter and that is the employee ID so let's remove this gender parameter now when the user is on this route we want to go to employee details component so let's specify that right here so when do we want to navigate to this new route that we have just created whenever the user clicks on any of these employee panels and we have these employee panels within our list employees component so let's open list employees component view template file now we want to redirect the user to a new route whenever they click anywhere on this employee panel so to make that happen what I'm going to do is surround this display employee component with another development and then wire up the click event handler when there is a click event we want to call a method on our component class let's call this on click and this method we want to pass the ID of the employee notice here we are looping through the array of employees and we have the employee object that is being displayed by this display employee component so we want to pass the ID of that employee now let's create this on click method within our component class now we know this method is receiving the employee ID so let's specify that parameter right here and the type of this is number now what do we want to do when we click on this employee panel we want to redirect the user to our new route and we are doing that in code to navigate to another route in code we use the angular router service so first let's go ahead and include the required import statement to import the router service from angular router package next let's inject this router service into a component class using the constructor now all that is left to do is use this router service navigate method to navigate to a new route so within this on click method let's use the router service navigate method now if you take a look at our route definition it has got two parts in it this is the path to our destination component and this is the route parameter when activating this route meaning when we are navigating to this route we need to specify these two parts so within the navigate method we are passing an array here this array is called link parameters array the first element of this array is the path to our destination component and that part in our case is for slash employees and the second element of the array is the route parameter we have the employee ID coming in as a parameter into this onclick method and that's what we need to pass right here let's save all our changes and then start our server notice now when I click on this employee we are redirected to a new route employees 4/1 one is the ID of this employee now I want to do one more change here when I hover the mouse over any of these panels we want to change the cursor style to pointer so the user knows this panel is clickable so let's open the CSS file of our list employees component I'm going to specify a new CSS class here let's call it pointer cursor and let's set the cursor style to pointer now let's specify the CSS class with Nebu template notice now when I have the mouse over any of these employee panels the cursor style changes to Han when I click on mark notice his ID is one which is passed in the URL similarly when I click on marry her IDs two now all that is left to do is from this employee details component we want to read this route parameter value and then retrieve that specific employee details and display them right here we'll discuss how to do that in our next video so to create a route with parameter in the route definition included for slash : and in the name of the parameter in our case the name of the parameter is ID to activate the route in code we use the angular router service navigate method notice to the navigate method we are passing link parameters array the first element in the array is the path to the destination component in our case it is for slash employees the second element in the array is the route parameter value in our case it is the employee ID now what if you want to activate the route declaratively in the HTML well that's when we use the rotor link directive notice we are binding the rotor link directive to the same link parameters array let's quickly look at this approach in action notice in the navigation menu we have presumed that link right here let's modify that link now those links are present within our root component app component instead of using this href attribute let's use the router link directive we want to bind this routed link directive to the link parameters array the first element in the array is the path to the destination component in our case it is for slash employees and the second element in the array is the value for the road parameter in our case it is employee ID for now let's hard code that value to be 2 and nothing let's change the text on the link to get employee with ID to notice now when we click on this link we are redirected to our new route employees 4/2 as expected in our next video we will discuss extracting the route parameter values thank you for watching and have a great day

Channel: kudvenkat

Views: 40,608

Keywords: angular 4 route params, angular 2 routeparams, angular 5 route params, angular 5 route parameter, angular 4 route parameter, angular 2 routerlink directive, angular 2 routerlink example, angular 2 routerlink parameters, angular 4 routerlink example, angular 4 routerlink parameters, angular 5 routerlink example, angular 5 routerlink parameters

Id: aP2hd4TePl4

Length: 10min 57sec (657 seconds)

Published: Mon Apr 09 2018