Build Web Apps with Angular 2 Challenge 7 Solution Part 1

Transcript from the "Challenge 7 Solution Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Lukas Ruebbelke: So let's jump into the code and see what this looks like. So basically what we need to do is break out this widget component. Into a few sub components, and wire it up using input and output. So let's see what we have right now. This is kind of what we wanna end up with, and this is what we're working with.

[00:00:32] So, the first thing I'm going to do, is I'll go ahead and just get this out of the way, I'm going to go into the widget service, and Scott was being a little wild here. With this crazy map thing that he's doing. Which I appreciate very much. Well I'm actually going to convert this back to a static structure because it doesn't translate to JSon very well as is.

[00:01:04] So we'll go id: 1, name: 'Widget 01',
>> Lukas Ruebbelke: And for some reason, just feel intuitively that widgets should cost money. We'll just go here.
>> Lukas Ruebbelke: It would be really handy if there was a web store plug in, or an ID plug in, in general, that you could actually do a column select, and then for every number in that column, it would just basically loop through and increment it by one.

[00:01:48] So if anybody's listening.
>> Speaker 2: Sublime does that.
>> Lukas Ruebbelke: Just stop.
>> Speaker 3: Isn't there an online service that'll create you a whole path of dummy dot ers?
>> Lukas Ruebbelke: I'll bet there is.
>> Speaker 2: Sublime has column select in the multi run increment numbers.
>> Lukas Ruebbelke: So, I mean I know you can do column select, but it'd be interesting to be, say like I'm at one, or I got it once, I'd like to do one, two, three, four.

[00:02:10] That's-
>> Speaker 2: Excel does that.
>> Lukas Ruebbelke: Excel. Okay, so I'm gonna switch over to Excel, we're gonna knock this out, and we'll all go home. Thank you. All right, so now I have a widgets collection here. We'll hop into here and see if this is rendering on the page.

[00:02:30] Yes, it is. So the first thing we need to do is create a widget list component, and put this in here. So we'll go here, New File.
>> Lukas Ruebbelke: Sure, why not.
>> Lukas Ruebbelke: WidgetsList.
>> Lukas Ruebbelke: Actually hold on, did I do?
>> Lukas Ruebbelke: Yes.
>> Lukas Ruebbelke: Now check this out. Actually I messed this up.

[00:03:26] Let's do this one more time. So this is the live template that I sent out. Go like this, 'widgets-list'.
>> Lukas Ruebbelke: Now some of this I'm actually going to delete.
>> Lukas Ruebbelke: Because we're going to do it inline, but at least we're started. The reason I said ViewEncapsulation for none is cuz I was actually using an angular two material library.

[00:04:02] Not the angular two material library, and I was having some issues with my styling. But, now you know. Okay, from here, let's go, and I need to import input.
>> Lukas Ruebbelke: Input.
>> Lukas Ruebbelke: Widgets.
>> Lukas Ruebbelke: Did I do this wrong? I don't have an interface for this yet, but we'll just click that.

[00:04:47] Then from here, we'll just.
>> Lukas Ruebbelke: Dump this out on the screen.
>> Lukas Ruebbelke: Like so. Am I missing anything? If I'm just pulling widgets in, I think I'm okay. Then we'll go back to our widgets here.
>> Lukas Ruebbelke: There we go.
>> Scott Moss: You gotta fix line three.
>> Speaker 2: Fix line three?

[00:05:58]
>> Scott Moss: Yeah, it's not a relative power.
>> Lukas Ruebbelke: Air five.
>> [SOUND]
>> Lukas Ruebbelke: Doing a property binding here because it's an input. "Widgets".
>> Lukas Ruebbelke: Okay? Slide back into here, and hopefully.
>> Lukas Ruebbelke: This is widgets, widgets, widgets.
>> Lukas Ruebbelke: So I've overloaded widgets.
>> Lukas Ruebbelke: And so this happens actually frequently where I'll have a component that is actually represents a list of something.

[00:07:03] And so I'll say, it's widgets. But then you would see here selector is widgets, but then I'm actually trying to actually do it down here as well, and this is confusing. So, I believe that's why that's happening. Just refresh to make sure.
>> Lukas Ruebbelke: Let's double check, I may be wrong.

[00:07:29] Widgets. JSON.
>> Lukas Ruebbelke: So it's there. It's not getting in here, so let's see what I have done wrong.
>> Speaker 5: I don't think you passed the widget type into your service.
>> Lukas Ruebbelke: What's that?
>> Speaker 5: I don't think you passed the widget type to your service.
>> Lukas Ruebbelke: In.
>> Speaker 5: Does a zero component need a listed directive so it can use?

[00:08:17]
>> Lukas Ruebbelke: So I just added the widgets list in here. [LAUGH]. You know what?
>> Speaker 2: That's the exact same mistake I make.
>> Lukas Ruebbelke: So, word to the wise, if you mess this up, nothing's going to happen, and I do this all the time.
>> Speaker 2: You'll want to call that directives.

[00:08:37]
>> Lukas Ruebbelke: I don't do that all the time.
>> Lukas Ruebbelke: Thing about live coding in front of people, man, you gotta be fearless.
>> Speaker 3: [LAUGH]
>> Lukas Ruebbelke: All right, there we go. So in case anybody was curious, WidgetsList is a directive, not a provider. Okay, so now, the first condition of the challenge is completed.