Transcript from the "Child Routes" Lesson
[00:00:00]
>> Now that we have built mostly a completed application with component of an architecture achieving this glorious master detail view application, we're going to move into some very specific examples that fortunately for us, they exist or they can kind of stand on their own. And so with that said, the first thing I'd like to talk about is child routes.
[00:00:27] And this is the ability to have a route and then within that navigated route, then have sub routes that you can then navigate within the context of an enclosing route. And so within our code what we're gonna do, is we are going to update the routing table to include a child route.
[00:00:54] And so we'll start with this examples route here. And it is pointing to an examples component. What we want to do is we want to add in children. And so this is just an array that takes in additional routes. And so from here, we are going to create a path and we are going to give this a path of child.
[00:01:23] And we're going to assign the component for this route to be an admin component. And there we go. But inside of this child route, we're going to add in additional child routes to really drive the point home. So we'll go children and within this children array, we're going to add in two additional routes.
[00:01:54] And you'll notice here that this is fairly conventional. So from here, we're going to go payroll. The component is going to be the admin payroll component and we'll duplicate this and we'll also create a vacation route and this will go to admin vacation component. Save this. We'll clean this up.
[00:02:27] And so now we have examples. An examples route and then within that we have a child route. So if we go to our app component I've added in an examples route here. That's /examples/child'. And what's going to happen is that when we go to the top level route examples It's going to load into the app component.HTML router outlet but if we look inside of our admin component we have an additional router outlet that's then going to load in the child route into that specific router outlet.
[00:03:15] So, let's go ahead and hop into the browser. Just refresh make sure, we're clean. And I'm going to click on child routes. And what we have here is examples. And then within that are child routes example, with these two buttons. That currently are not doing anything. And what we want to do is we want the ability to load those two child routes in to this particular router outlet down here.
[00:03:49] So what I could do is I could go /vacation and you'll see here that now the vacation component is loaded inside of the admin component or I could also go payroll. So we'll just update this to payroll. And you'll see here now we have the payroll component loading inside the admin component.
[00:04:13] Now, these buttons here would be nice if when you wanna navigate to these that you're not having to go into the address bar and type this in. And so using router link, we can target this child route. And so let's go back into our code and we are going to update this.
[00:04:39] And so within this we are going to add in a router link, oops. And then we're going to fix this up in just a second. Let me just double check my notes to make sure that I'm doing this correctly. All right router link and we will add property binding to that.
[00:05:12] And then from here we are going to add in an array. And so this is going to take a couple of different things that allows angular to pass out the values of this array and put it into or construct a URL that we can navigate to. So, the first thing we wanna do is add in the base route, which is going to be examples for slash child.
[00:05:40] And then from here we're going to add in the second portion of this, which is payroll. And I'm gonna go ahead, and I'm going to copy this. And we'll paste this in here. And we'll change this to location. And so now router link is now going ahead and taking these two values and concatenating these into a single URL.
[00:06:09] Now where this gets handy is if you needed to add in like a route param in between these. You could do something like param, whatever it is, and it would kind of put that together. So again, using something like array.join, it is dynamically constructing that URL for you.
[00:06:29] So I'm gonna go ahead and save this. And now if I click on this, you'll see that we are going from one child route to another. And so this is really handy if you want to allow for dynamic navigation within a small portion of your application without having to kind of redress the entire thing from the top down.
[00:06:54] So, this is how child routes works in angular, very very handy and as you can see not a lot of heavy lifting to make that happen.