This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 2 Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Lukas: So let's walk through this challenge real quick. The idea was to create a widgets feature, display it on the home page. So from the app directory you could see that I have about, experiments, home. These are specific features and then we have a common directory where we put our common things that need to be shared across the application.
[00:00:27] So we'll just go here, create a new directory, widgets. And then within this, am just going to create a new type script file.
>> Lukas: Keeping with the convention of the application, we'll go widgets.component.ts. I'm not going to add this. From here, export class
>> Lukas: So create the class.
[00:01:04]
>> Lukas: Component from
>> Lukas: Core, like so.
>> Lukas: Component, we'll go selector.
>> Lukas: Widgets.
>> Speaker 2: Watch your colon.
>> Lukas: Yes, I was just looking at those squiggly lines thinking like what is it trying to tell me here.
>> Lukas: Okay.
>> Lukas: And then from here, let's go into our home component.
[00:02:08] Let's import our widgets module that we just created.
>> Lukas: There we go.
>> Lukas: We'll define this as a dependency.
>> Lukas: We'll hop into the template here.
>> Lukas: And let's see if this rendered.
>> Lukas: Hello widgets. Boom! Done. Mission accomplished.
>> Lukas: Scott, are you ready for templates?
>> Scott: [LAUGH] Yes,
[00:03:14]
>> Speaker 2: You din't show the extra credit.
>> Lukas: Fine.
>> Lukas: So we will go into-
>> Lukas: So we're just gonna add a new route definition here. We'll go widgets.
>> Lukas: You can see here it's like, I don't know what this thing is. Well there's a good reason for that.
[00:03:57]
>> Lukas: Widgets, widgets. Like so.
>> Speaker 2: You gotta change home component to widgets in your import statement.
>> Lukas: That's right. Thank you.
>> Speaker 2: You're welcome.
>> Lukas: If I had a t-shirt, I'd give you one. Any t-shirt. And I need to do one more thing.
>> Lukas: We'll go here, duplicate this.
[00:04:24] We'll talk about what routerLink does a little bit. But for now it's pretty self explanatory. This is the simplest possible version of a router component that you can use. And that is in your route config, so again we're seeing decorators here. We're decorating this class to have like these routes available to it.
[00:04:44] And the convention seems to kind of space these out so they line up like a table. I don't really have a thought about this. In fact I'm leaning against it but this is the way it is now so, I'm trying it out to see. But we want to have a path of widgets.
[00:05:05] The name is widgets and it uses the widgets component. So you can imagine this is why it's called the component router because it maps a route directly to a component. Now let's see if this actually worked.
>> Lukas: [SOUND] Boom! Like I'm learning stuff. Like I know things now.
[00:05:30] And there you have it.