This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 7: Solution, Part I" Lesson
[00:00:00]
>> Lukas Ruebbelke: So let's get started. Going into web store and let's go into our widgets component. I'm just gonna close all of this and,
>> Lukas Ruebbelke: It's just got all kinds of stuff in here. All right, so first things first. This is kind of a two phase challenge as I was telling the people here.
[00:00:29] Let's break this into tiny steps. The first thing we need to do is just create the components and get them rendering and from there, then we can worry about wiring them up.
>> Lukas Ruebbelke: So we'll go new.
>> Lukas Ruebbelke: widgets-list.
>> Lukas Ruebbelke: TS.
>> Lukas Ruebbelke: I create the HTML.
>> Lukas Ruebbelke: And let's go ahead and do the CSS as well.
[00:01:44]
>> Lukas Ruebbelke: So let me just drag this down a bit. I feel like I can speed this up. Let me just try something real quick.
>> Lukas Ruebbelke: Hang on.
>> Lukas Ruebbelke: Trying to see if this is going to save me any time.
>> Lukas Ruebbelke: Maybe, yeah, all right. Touch for the win.
[00:02:44] So far so good. I've simply just stubbed out the files and the directory structure. So let's be about this.
>> Lukas Ruebbelke: So I know that order in Cider is class, import, decorate, but with autocomplete. Sometimes it's easier to just let the autocomplete do the imports for you. I'm trying to figure out why is this angry?
[00:03:37] Yes. Okay, what we need here, selector.
>> Lukas Ruebbelke: Hold on, list and template URL.
>> Lukas Ruebbelke: Realizing now this is plural.
>> Lukas Ruebbelke: And then let's go into our component.
>> Lukas Ruebbelke: Widgets list, okay.
>> Lukas Ruebbelke: Man, I was being so clever and I broke the convention.
>> Lukas Ruebbelke: This is the part where you, in excruciating detail, prove that you are yet a human.
[00:05:25]
>> Lukas Ruebbelke: So does this look okay, widget-list.component?
>> Speaker 2: It should be detailed.
>> Lukas Ruebbelke: [NOISE] You guys are amazing. If I wasn't hanging out with 100 of my best friends, I'd be super embarrassed right now. How's that? Good? Good, all right. And on live television no less.
>> Lukas Ruebbelke: WidgetDetail.
>> Lukas Ruebbelke: Okay, selector.
[00:06:17]
>> Lukas Ruebbelke: Detail.
>> Lukas Ruebbelke: Okay, so we've created them. Let's expose them. So let's go to our module here.
>> Lukas Ruebbelke: We're getting closer.
>> Lukas Ruebbelke: All right. So now,
>> Lukas Ruebbelke: I'm just going to,
>> Lukas Ruebbelke: Get back here.
>> Lukas Ruebbelke: So if I want to put the list or the widget list into our component, how do we do that?
[00:08:43]
>> Speaker 2: Selector app.
>> Lukas Ruebbelke: The selector.
>> Speaker 2: Widget.
>> Lukas Ruebbelke: Widget-list, there we go, and then let's go here.
>> Lukas Ruebbelke: I think I did this right.
>> Lukas Ruebbelke: Then for the detail.
>> Lukas Ruebbelke: All right, let's see what we're up against here so this would be kind of what I consider the first, increment.
[00:09:20] Boom.