What is Child Routes in Angular | Angular Routing | Angular 13+

in this lecture let's learn what is a child route and how to create and use a child route in angular child route is also called as nested route so child routes or nested routes are a powerful new feature in angular router nested routes are the routes within other routes so in this lecture i will show you how to create a child route and display the child components let's open vs code and let's first revert back the changes which we made in our previous lecture where we learned about fragments so what i am going to do is i am going to comment these links and i will uncomment previous links where we are using this router link and we are specifying some path to it then let's again comment these selectors and uncomment this router outlet let's save the changes let's go back to the web page and now our page should be working as earlier so now the views are displayed in different pages okay so here we are displaying the view of home component then when i click on this about link here we are displaying the view of about component then here contact component and here courses component all right now here in the courses page we have a list of courses and for each course we have this show details button and when i click on the show details button it is taking us to the detail page of that course so here you can see the details related to that course and in the url you will see the route as root url slash courses slash course slash the id of that course and we are defining this route in the app modules file so here you can see here we are defining this route now we can define this same route using child routes let's see how to do that so what i am going to do is i am going to comment this route here and let's create a new route here let's specify the path first so here the path is going to be courses okay and to this i am not going to specify any component instead i am going to specify another property which is children and to this children we can assign an array and inside this array we can write all our child routes so let's specify one child route here so again just like any other route we use this object literal syntax inside this we specify the path so here the path is going to be course slash and then we want to use a route parameter for that we can use colon and the parameter name is going to be id so this is the path then let's also specify a component to it so to this component let's specify course component okay with this let's save the changes let's go to the web page and let's go to course component i mean this courses page and here let's click on the show details button of one of these courses so let's click on this show detail and here you will see it is displaying 404 page so since this navbar is fixed here that's why we are not able to see the complete message let me go to appcomponent.css so here and let's set this position to relative let's save the changes let's go back to the web page and now you can see it is displaying this 404 page and here in the url you will see it is courses slash course slash 102. so earlier with the same route it was displaying the course properly but here for some reason it is not displaying the course now i will explain the reason why it is like that but before that let's also test one more thing so in the route here instead of course let's specify empty string like this let's save the changes now let's go to the web page let's go to courses here and let's click on the show detail now again we are seeing this 404 page but this time we have this error because on this button element if i open this courses component so let's open this courses component.html here to this router link we are specifying this path this courses slash course and then the id of the course but here we don't have this route in our defined routes okay so we don't have any route with courses slash go slash id right so here let's do one thing let's remove this courses from here let's save the changes let's go back to the web page let's click on this courses and let's click on this show detail button and now it is properly displaying the course so why is that that's because here when we have defined this child route for this child route the parent route is the root url and for the root url we are specifying the home component okay and we are using this router outlet inside that component but when we specify courses here so courses like earlier in that case for this child component the parent component will be the component with this path so this courses component so in order to make this work we will have to use router outlet inside the parent component okay so if i go here inside this courses component.html and let's change this path to courses slash course id of the course and then here after this ng container let's use router outlet okay and here let's use absolute path otherwise this path will be appended to the currently active route right but we want this route to be appended to root url so here i have used this slash to make it an absolute path let's save the changes now let's go to the web page and here now let's click on this one one of these courses so on the show details button and now it is displaying the course properly okay so the issue earlier was here we have created a child route but in order to make this child route render the view properly we need to add the router outlet in its parent component and that's what we are doing here we are adding this router outlet in the parent component of this child route and that's why it is working properly now in this way you can have as many child routes as you want separated by a comma okay so if you want to get a course by name then you can also specify a path for that so here let's say course and then we can use the name route parameter okay and then we can specify the component so let's say the component is still going to be course component okay so in this way you can specify multiple child routes for a given parent route all right and since we are nesting this route inside another route that's why it is also called as nested route this is all from this lecture thank you for listening and have a great day

Channel: procademy

Views: 19,479

Keywords: child routes, nested routes, angular routes, angular, angular tutorial, complete angular course

Id: 8jDKknEXh3g

Length: 8min 35sec (515 seconds)

Published: Sun Mar 20 2022