Build Web Apps with Angular 2 Challenge 6 Solution
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 6 Solution" Lesson
>> Scott: So let's go ahead and walk through this solution. Creating route to the widgets feature. Let's do that.
>> Scott: Let's go over to our app folder here. I'm not sure that I like this syntax better. I might just go back to type script here. There we go.
[00:00:22] This isn't that good either. Sublime can do it. Adam needs to figure it out. So we'll just say widget, a name. Widget seems appropriate. Add a component, the widget component.
>> Speaker 2: It's already name widgets I believe.
>> Scott: Is it? Okay. Well that's what it shall be. Widgets from /widgets/widgets.
>> Scott: All right. So we made a route, and just by doing that, we should be able to navigate to it, manually. Right. So if we come in here, should be able to come in here and see widgets. And we get that. All right, so just by setting up that configuration we can mainly navigate to it.
[00:01:25] We haven't set up any configuration in the app yet so let's do that. So the next thing is use the route link to navigate to the widgets feature. Okay, let's do that. So if we go into our app.html, can set up another routerLink here that will go to links.widgets.
>> Scott: Widgets, and then down in app.typescript, well just make another entry here into our links.
>> Scott: Widgets. That's gonna break. There we go. So now we have a widgets link up here in the navbar that we can navigate to. Any questions on this so far? Anybody get stuck on one of these parts?
[00:02:28] A little confusion. The next thing we want to do is create method in the items component that imperatively navigates to that route. Let's go over to items and we'll go to the items component here. And we know we're going to use the router so we might as well just import that now.
[00:02:48] So I'll just go do that.
>> Scott: So we get the router service. Go over to the constructor here.
>> Scott: Inject it into the constructor. And then, now, we just need to create some functionality. So we'll just say, go to widgets.
>> Scott: The start router.navigate to widgets. It's now easy to wire this up to something inside of here.
[00:03:43] Let's just, yeah, let's just get rid of the widgets component, that's at the top. And now we'll just add a button that has a click that says go to widgets.
>> Speaker 2: It's spelled differently down below.
>> Scott: Ok, thank you.
>> Speaker 3: No, that was teamwork.
>> Scott: Yes, it was.
[00:04:12] Here we go.
>> Speaker 2: No, it's still spell different.
>> Scott: Still spell different.
>> Speaker 2: It's got to widgets down below.
>> Scott: Is it?
>> Scott: Yeah, it is.
>> Scott: There we go, go to widgets. All right, so now, if we go to Items and we click on this ugly button, it will go to a widgets.
[00:04:40] All right? So now, we got that set up. Any questions on that part? All right. Everybody understand that we need to make sure we inject this service in order to call the navigate method. That's where it comes from. And we pass it into the constructor of the component.
[00:04:56] And because I initialized this service as private, this really just makes it, by doing that, it's just saying this. Router equals router. That what is doing. I didn't have to set that up. And if you want to check that out, "Where is the build? I was thinking random memory.
[00:05:22] Never mind. Whats it really going to build? but that is really what I was doing. So the next thing we need to do is add both route parameters and query parameters, which are pretty much the same thing, to the widgets route. Okay, let's do that. So, let's say widgets and then id.
[00:05:45] Let's look at the widgets service here. Widget name. Let's give these widgets ID's.
>> Scott: Let's do that.
>> Scott: It was right here. And description.
>> Scott: So let's build this up so we can use this.
>> Scott: Cool.
>> Scott: So this is just shorthand syntax. Because it's only one parameter, I can skip the return key word.
[00:06:51] It's implicitly gonna return. Because it's multi-line I have to wrap it in parentheses, right here.
>> Scott: So, if that's kind of confusing let me do this.
>> Scott: It's just in this.
>> Speaker 2: Post the error that it complains about.
>> Scott: It's complaining about that. It's not. What is it complaining about?
[00:07:24] Well now this is an object, now I have to wrap this. I need to wrap that in parentheses, so that's going to stay like that. There we go. It was complaining because it didn't know if this was an object literal or a function body bracket. That's why it was complaining.
[00:07:40] So I route the around it and I don't have to put the return key word because it's implicit, it's implied. So yeah, we're just gonna return this for the. We added the IDs there, I'm gonna go ahead and make a function inside of Right here. Let's expand the gotoWidgets to take a widget number.
[00:08:08] Or id which is string. So we'll say id id is ID. so we can use the object shorthand method and just put id there. That'll work. If the property name matches a local variable that you're going to assign to the property name, you can just write. The name once and it will assign it.
[00:08:34] So it's equivalent doing this ID, ID. I can just say ID.
>> Scott: So we'll do that.
>> Scott: And then inside the widgets component we need to anybody remember the service I need to inject in here to get access to the parameters?
>> Speaker 4: [CROSSTALK]
>> Scott: All right, exactly.
>> Scott: So we got route params in here.
[00:09:13] We just need to place it in here.
>> Scott: Param, yeah.
>> Scott: Cool, so now we got that. And now what we can do is we can just grab the active widget. Which would be this dot-widgets-dot-find. What the widget whose widget.id === params.id ID.
>> Speaker 5: Based on integer?
>> Scott: [SOUND] Yeah it probably will, there, will fail on the lookups, good catch.
[00:10:33] Active Widget equals a string or an object.
>> Scott: Or yeah.
>> Scott: Ooh, that's a lot. Let's break that off on the next line. There we go. So, then we go to active-widget and then what we can do, is we can just put the active-widget here.
>> Scott: I will say ActiveWidget.name, description.
[00:11:36] So let's check it out. If it all works we should have the active widget here, so let's check it out. Something broke. id was not included in the parameters passed in. So where ever, I think I know where, it's that button that I left somewhere. This thing or-
>> Speaker 2: Yeah, you're not passing in an ID.
>> Scott: Yeah, I'm not passing and ID. We'll just default to something really quick.
>> Scott: Let's default to one for now.
>> Scott: Okay. Really?
>> Speaker 5: Cuz you're already on that page? Change the URL in your browser to open it.
>> Scott: Yeah, that's true, we are already on this page.
[00:12:32] Let's say two. Let's refresh real quick. So now we get ID was not included.
>> Speaker 5: Is that the link at the very top?
>> Scott: Yeah. I think that's it. Link.this, yeah its this right here.
>> Scott: Type number is not assigned by the type string. Really?
>> Speaker 2: You got anything in your default assignment?
>> Scott: Right here?
>> Speaker 2: String that you're passing.
>> Scott: Here. Good old TypeScript. That's why we use it. [LAUGH] And refresh. And you don't wanna refresh. Now you refresh.
>> Scott: Okay, I'll refresh it. There we go. Okay. So now, click on Widgets. There it is, widget 1. I am active widget 1.
[00:13:50] If we change this to 2, Widget 2, widget 3, so forth. Any questions on the parameters? Accessing those and adding dynamic things to the page? Everybody got that? Okay. So now, the child stuff, let's just do that. Let's just get it out of the way. I know there's questions.
[00:14:20] [LAUGH] I know there's questions, we already have the demo one set up. So, I could do it again, but. Is there any questions on the child stuff?
>> Scott: Everybody go through the example of getting the child thing set up? No?
>> Speaker 3: I'm getting an exception, primary outlet is already registered.
[00:14:45] Is that a common?
>> Scott: That's because you probably have used default. Twice on the same component, route and config. You can only use use default for one route per routing config and that's where the error comes from. So if you have that you probably ran to the same thing that I have where I was trying to set up it's like a grandchild as a default.
[00:15:14] Put use default on that child's router config and not the top level config. So on the nested router config, use default on that path.
>> Speaker 5: Does that mean that if you define route configs in all Places. You only get one use default across the union of all of those.
>> Speaker 2: You get one use default or is it just within that per route of the.
>> Scott: Yeah, per route of the.