This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Child Routes" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: Child routes, they're unique for Angular Two. But they are ideal, we need child routes. That was the whole cavit about the Angular One routers was like, what's the story behind this? How do we do this? And we couldn't so UI router came out. So this is our implementation, it's different, but it works.
[00:00:25] So, components of child routes are ignorant of the parents' route implementation. So children don't know that they belong to some parent. They don't know what their parents' configuration is, they just don't know. They use routes and paths, and that's it. But the parent, and its config. And it's path property, the path property here.
[00:00:45] The path property at the end of it you just need to put a forward slash dot, dot, dot. That's it. [COUGH] Excuse me. So you put a forward slash dot dot dot on the path of the parent property whose child route, or whose route will have a child inside of it.
[00:01:09] I know. You're looking at me like, what. Trust me. We'll go through it. But that's how you set up a child route instance, you have to do that. And then this is gonna allow you to place another router outlet inside the child component.
>> Scott Moss: So right here at the top, we set up another component here for the path, and you can see we put forward slash dot, dot, dot.
[00:01:34] This means, hey inside of this, another-component template, there's going to be another router outlet and it, too, will have it's own route config which is right below it. There's another route config and then, so where it says /first, that's going to be mounted on another-component. So, it's going to be another-component/first.
[00:01:54] That's where that's gonna be mounted.
>> Scott Moss: Yeah, yeah.
>> Scott Moss: All right, so let's get into it. I've got some plunks. I want to do a little bit of live coding and then we're gonna jump into our exercise, cool? All right, so one of the plunks that I wanted to show was one that I thought was kind of gnarly was a child router.
[00:02:30] So we'll just look at that for a little bit and then we'll do some live coding. So any questions on the child router? I seen some confused faces.
>> Speaker 2: Just one, if you had, if you wanted a bare route, like just the parent route ending with the last component?
[00:02:49] But without a child component part, how would you do that?
>> Scott Moss: Well, if you just want, I'm guessing what you're saying is you have a bare route, and then you have another extension on the route. First you have slash users and slash users ID. Is that what you're saying?
[00:03:03]
>> Speaker 2: Yeah, well kind of. CEC had users, and then a child component is our profile. For whatever reason.
>> Scott Moss: Okay, I see what you're saying. That depends on where you want profile to load up. Does profile load up in users or does profile render on its own page?
[00:03:18] There's a difference. If profile loads in the users template, then you need child routing. If profile is its own page then you don't, you just navigate to it normally and you're fine.
>> Scott Moss: We'll go over that example, yeah. So it really all depends on where do you want that component to render.
[00:03:34]
>> Speaker 2: In other words, is it parallel or is it nested?
>> Speaker 3: Well what if it's nested but you also want just to be able to look at the user record?
>> Scott Moss: I see what you're saying. So you can set a, you don't have to go to the child route.
[00:03:52] You can set the parent route as the default. So therefore if you don't want to go to the profile but just look at the user, you can go there and the profile won't render. Yeah, you just have to put use default on the parent, the one that has dot dot dot.
[00:04:05]
>> Speaker 3: Okay.
>> Scott Moss: You can put use default on that, yeah. Good question. So, this thing doesn't render by default? Okay. So let's take a closer look at this stuff. So the child routes. Let's just look at the code.
>> Scott Moss: Where's it at? That's not it.
>> Scott Moss: There it is.
[00:04:36] So, in the parent router, is that big enough? Do I need to make this bigger? Let's make it bigger. So in the PAN router, again, when you setup the route config, it's pathed, so normally you would just make a path like this, right. And then you'd be done, like here's my path.
[00:04:57] But because we're gonna have a child, we're gonna have another component render or another component render in this router outlet we need to say hey we're gonna set up a child router here. So we just do dot, dot, dot, and then now we add our router outlet. And then for the child component if we go into the child component.
[00:05:21] Where is it at? This one right here. You see it has a router outlet and the only reason it can do this is because we put the dot dot dot in its parents configuration.
>> Scott Moss: So now it also has a router outlet and it also has its own route config.
[00:05:39] And it too could have its own children.
>> Scott Moss: We'll go over this a little more, it's, I know. It's different than most routing frameworks.
>> Speaker 2: So pop that on to full screen and then see what that looks like.
>> Scott Moss: All right, where is the full screen button, this thing?
[00:06:02]
>> Speaker 2: No, yeah.
>> Scott Moss: All right, so, I spilled it. Let's refresh.
>> Scott Moss: Okay, I guess it just didn't want to do it.
>> Scott Moss: Let's try that again.
>> Scott Moss: Okay, here we go. So right here, let's check it out. If we go look at our component, right here, inside another component, it just says, introducing.
[00:06:53] So we scroll down on what's rendering, that's all we see. Introducing, it's child hasn't been mounted yet. There's no route, nothing has been placed here. We haven't navigated anywhere, right? That's it. It's just empty. Then if we go look, and you see this button right here. It says, hey, if you click this button it's going to go to Firstchild.
[00:07:15] So, we didn't talk about Firstchild. But, Firstchild is really, all it's going to do, it's just going to say, hey we want to load up the route called Firstchild. All right, so, if we go back to the router configuration, did I pass it? Right here, the name of this route is called Firstchild all right?
[00:07:34] So when we click this button we're saying hey, we want to, mount Firstchild route as the child component for this route.
>> Scott Moss: So that's where the relationship comes, because remember, the child doesn't know about the parent. So this is where the relationship comes, right here. So we're mounting the first child component onto another component when we click this button.
[00:08:03] So that's why when I click this button, the first child component is going to be rendered right in here to this router outlet, or another component. But even more so, if we go look at Firstchild component. Again we can make sure that the templates, everything is there, everything is mounted.
[00:08:32] And again the first child also has its own routing setup.
>> Scott Moss: Yes.
>> Speaker 4: So, in another component, if you were to have the link to Firstchild in that template would you have to define another component in the router link or could you just say Firstchild, it'll know where to go?
[00:08:58]
>> Scott Moss: Yeah, so because the child doesn't really have a parent, it doesn't, so if you just navigated straight to it, yeah, it'll just load it up. So, but I think this is actually, now that I think about it, it's actually a good thing because then you can use the routes.
[00:09:11] Maybe I want this route to be a child route on this link, but on this link I want it to be separate. I want it to be it's own route because it doesn't know about its parent. So yeah, if you just navigated to it, if you just navigated to first, it would just load up first.
[00:09:24]
>> Speaker 4: Right, but if you add the link in the template for another component.
>> Scott Moss: Inside of-
>> Speaker 4: Inside of there.
>> Scott Moss: If you had a link.
>> Speaker 4: And so in the router link. So let's say in between the router outlet in [CROSSTALK] h1, you had an a with a router outlet.
[00:09:38] You could just say FirstChild? You wouldn't have to say-
>> Scott Moss: Well this is FirstChild.
>> Speaker 4: Okay.
>> Scott Moss: Right we are our FirstChild. But you mean like if we try to set up the navigation in this page.
>> Speaker 4: Yeah.
>> Scott Moss: I think if you just put Firstchild, it's just gonna mount just Firstchild without a parent.
[00:09:55]
>> Speaker 4: Cuz in your app you're saying route to another component and then Firstchild.
>> Scott Moss: Right.
>> Speaker 4: So if you're already in another component.
>> Scott Moss: Is it aware?
>> Speaker 4: Yeah, and you wanna [CROSSTALK] have a link to Firstchild.
>> Scott Moss: Yeah.
>> Speaker 4: Could you just router link equals Firstchild and?
[00:10:08]
>> Scott Moss: I don't think it would be aware. The way they have it set up, from my understanding, is that the child just doesn't know anything about the parent. Even though it's mounted on that URL. I would say, we can test it, but I'm guessing that it won't know and you still have to set that up.
[00:10:22]
>> Speaker 5: I'll give it a shot and see what happens.