This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Router Demonstration 2" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott expands on his first route coding example. He first adds query parameters for an id and a user. Then he adds a child route and demonstrates what happens if a default child is not set.

Get Unlimited Access Now

Transcript from the "Router Demonstration 2" Lesson

>> [MUSIC]

>> Scott: So let's check out query params and how that works. So now let's say we want to have id on here, right? We do that a lot. So now we'll have id here and then we'll go into our, at the html here, and then what we'll do here is, sorry.

[00:00:25] Enter our ts, and we'll just pass in a static id for now. And we'll just say id is 20. All right, so the second argument to this array was gonna pass into id, an object with id property, we'll just do static id for now, which is 20. And then now, if I want to get access to this ID inside this component, I can go into here and then I can import from Angular to size router or routing.

[00:00:59] Not router. Router, yeah.I can get the routes params.
>> Scott: So now that I have the route params, now I can inject it in here and I'll just say private.
>> Scott: Routes let's just say router. That's just too much work. We'll just call it params.
>> Scott: Or is that the other way around with the typing?

>> Speaker 2: No that's right.
>> Scott: Okay, cool. So we got that, and now what we can do is, we can just look at it. We can say, params.get, and then the key of the thing we wanna get. So the ID. Let's just alert that.
>> Scott: So, let's check that out.

>> Scott: So now if I click on this thing. Boom, alert 20, which is the ID that we put in there. Again, there's no, if you want to add multiple parameters here. You can totally do that. Just make sure you reference them with the same key inside your look up on the route params.

[00:02:36] And questions on the parameters? Nope, okay. So the other thing, before we get back to child routing, we got navigating. So let's check out the navigating. So if we want to navigate to another route, let's say, without clicking on that link, but inside of our JavaScript somewhere, when this action happens.

[00:03:01] So what we'll do is we'll come in here and we'll say go ToDemo(); and we need to inject the router. So, constructor() here, contructor Constructor.
>> Scott: And we'll inject the router.
>> Scott: Is that up there? No, make sure we import it. So we've got the router, that's good.

[00:03:42] And then now we can come down here and say this._router.navigate. And we're just going to literally navigate to the same thing that we did inside the template which was, oops, which was this. So I'm just gonna say this.links.demo.
>> Scott: So we got that. And I was gonna wire this up in the template somewhere.

[00:04:12] Let's just make a trivial button where I click.
>> Scott: That has a click Listener that just says go to demo. All right, so on click it's going to fire this function, which is then going to call the router.navigate to the links.demo, which is going to mount the demo component with this id.

[00:04:41] All right, so let's check it out.
>> Scott: Click demo and it looks like I broke something, let's check it out.
>> Scott: I left user in there somewhere.
>> Scott: The zone's AS is really good with this and stuff. Really good stuff, boom. That works that way too. Any questions on this?

>> Scott: All right, now let's try the child router. Notice I said try.
>> Speaker 2: [LAUGH]
>> Scott: [LAUGH] Yeah. So let's just set up a child routing here on demo. And what we'll do is we'll do dot, dot, dot. We got a question back there?
>> Speaker 3: Yeah, any reason why the params has a get function instead of just allowing you to use the dot?

[00:05:40] To get the ID?
>> Scott: I don't know the exact implementation details on that. Maybe it's because the values might be dynamic and they change. They're not static. Instead of having a pass by reference object. They wanted to put getters and setters to make sure that the value is always up to date.

[00:05:56] I'm guessing that's why they would do it.
>> Scott: And then we'll also say use as default here, or actually, will that work here? We'll come back to use as default. Well I'm just gonna put child there, and then now if I go to the demo, change this to backticks.

>> Scott: I can now put a router outlet in here so let's just make sure we say demo here. And then I'm also gonna put a router outlet here. So now that I have an router outlet here I need to set up a router config for this component. So now we'll do a router config.

[00:06:56] Again, after we import it. Or route config. [NOISE] Oops, all right. And then I'll just make another one. Path and we'll call it demo one, and its name is one. And its components is, we haven't made it yet but it's gonna be ChildComponent. Maybe I'll change it to ChildCom

>> Scott: That's what we'll do.
>> Scott: Cool, so all we need to do is make that I'll just do it right here.
>> Scott: All right so we got that. Oops, ChildComponent. [SOUND] [LAUGH] What was that? All right, so now that we set that up-
>> Speaker 2: [LAUGH] Mom, I'll call you right back.

[00:08:32] I'm the middle of something.
>> Scott: Now that we set that up, when we navigate to demo, it should also load this ChildComponent. Let's check it out. Looks like something is, yeah, I'm still on this URL. Let's go over here. Looks like I broke something, let's see here. I just gotta get rid of that.

[00:08:57] Let's get rid of this stuff.
>> Scott: Refresh, there we go. Threw it out there. It's not resolve to a terminal instruction.
>> Scott: Hm, terminal instruction, what does that even mean? Demo component.
>> Scott: I think we need to. Use as default. I think what it's saying is that we couldn't resolve what's going on in demo so we don't know what to load up.

[00:09:50] Okay that's not the resolution.
>> Speaker 4: Just make the first one false. The items says default.
>> Scott: Yeah but I don't think that's going to solve this.
>> Speaker 4: You can only use one as default, right?
>> Scott: Yeah, it's still going to say that. So I think what we need to do is-

>> Speaker 4: In the second one for demo, set that to use as default.
>> Scott: We'll try that. But what I think what we need to do is the child stuff on the sub child of the demo.
>> Scott: Yeah, that still don't read.
>> Scott: I think what we need to do is come into demo and put useAsDefault here.

>> Scott: And I think that is what we want. Why is this syntax look different? This is using JavaScript. I'm like what.
>> Scott: Yeah, that looks like what we wanted. So now, if we go to Demo. It's still trying to do that but it mounted demo child.
>> Scott: So that's child routing, [LAUGH] as you can see.

[00:11:20] Any other questions?
>> Speaker 5: What did you just do to fix it?
>> Scott: Yeah, so the fix was because it was complaining because it didn't know how to resolve-
>> Speaker 5: I see.
>> Scott: This, so I said, by the way, this is the default so this is the one you should resolve.

[00:11:38] The error was kind of cryptic but I figured out that's what it was asking.
>> Scott: Any other questions on the routing?
>> Speaker 5: So, when you have a child-route, you have to have a default route somewhere?
>> Scott: Yeah, I'm pretty sure there's an option in the docs. So we can look right quick.

[00:11:58] It changes, that you can say, hey I just want, if there, if we know what navigates to one of my childs, don't even worry about it. Just mount what's here and don't freak out. I'm pretty sure there's an option for that. I just can't remember what it is because it changed.

[00:12:14] It's definitely in there. I'll figure it out before the solution and we'll come back to it.