Build Web Apps with Angular 2 Challenge 4 Solution

Transcript from the "Challenge 4 Solution" Lesson

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

[00:00:03]
>> Lukas Ruebbelke: So I'm going to go ahead and do a new widget service.
>> Lukas Ruebbelke: And we'll go export class.
>> Lukas Ruebbelke: And I'm going to go widgets.
>> Lukas Ruebbelke: Sure. That's probably good enough. We'll duplicate this a few times.
>> Lukas Ruebbelke: I'm trying to think of how I can possibly one-up Scott with the crawling button of doom.

[00:01:03] Okay so I defined my class.
>> Scott: Got to take chances.
>> Lukas Ruebbelke: Got to take chances. Your button actually reminded me if anybody has seen Mr. Peabody or Sherman and Mr. Peabody or that creepy doll like that Leonardo da Vinci, like you know Like Papa, Papa, or whatever. So if you haven't seen that movie that's what that button was the programmatic equivalent of.

[00:01:24] So from here import injectable from, I think this is in core.
>> Lukas Ruebbelke: We're doing this from memory. Let's see.
>> Lukas Ruebbelke: Is this it? I think it is. Now let's go ahead and we'll go to our widgets component.
>> Lukas Ruebbelke: I think in this case I do actually have to, well let's see.

[00:02:11]
>> Lukas Ruebbelke: Up here?
>> Audience: In providers there.
>> Lukas Ruebbelke: Okay. So actually, you know what? I am going to do it here.
>> Lukas Ruebbelke: Widget service.
>> Lukas Ruebbelke: And so there's actually a question which I hadn't thought about until we brought it up and then I remembered is talking about hierarchical injectors is that how come in for instance the home component we don't have to put providers and define that on our component meta data.

[00:02:52] And the reason being is because at the top level here it has been defined, so its available from the app component all the way down.
>> Lukas Ruebbelke: So just go in here. We're going to go like so. And then back to our widgets component.
>> Lukas Ruebbelke: And go to constructor.

[00:03:34]
>> Lukas Ruebbelke: Holy moly! Did you guys see that?
>> Lukas Ruebbelke: Did that just happen?
>> Audience: It's code
>> Lukas Ruebbelke: Whoa, I've been living below my privileges. Like we would have cut 20 minutes of this workshop had I known that.
>> Audience: That's WebStorm right?
>> Lukas Ruebbelke: Yes. So
>> Lukas Ruebbelke: I guess this just turned into a WebStorm commercial.

[00:04:03] That was, man I just don't wanna do that again. That was, I'm gonna do that one more time because I can't believe that just happened.
>> Audience: You have public or private on there?
>> Lukas Ruebbelke: So I'm just going with default to public for now.
>> Audience: Default.
>> Lukas Ruebbelke: Yeah, so if you don't put anything it just defaults to public.

[00:04:21]
>> Lukas Ruebbelke: That's so rad.
>> Audience: You know you can do fuzzy typing too. You could type like W I D S E R, yeah like that. Yeah. That's it
>> Lukas Ruebbelke: So if anything, I think that's a pretty good case for typescript, and writing code that conveys intent, because now you get things like automatic imports, which honestly I had forgot about that because I haven't done Flex in like six or seven years.

[00:04:53] But that used to be pretty common of like, I need this thing tab and it would just bring that import in for you.
>> Speaker 4: Can we get Adam to do that as well?
>> Speaker 5: Yeah, I would imagine it probably would.
>> Speaker 6: Adam's pretty good.
>> Lukas Ruebbelke: Yeah, so we should.

[00:05:09]
>> Speaker 4: Just doesn't have those powers with the templates.
>> Speaker 5: Yeah.
>> Lukas Ruebbelke: Why doesn't it like this? That's why. So I'm just going to set this array type any. Just initialize this to an empty array, and then from here let's go like so. And,
>> Lukas Ruebbelke: We'll follow up with Scott's stellar template binding example.

[00:06:07] And we'll go with I don't know. Div ngFor widget of widgets
>> Lukas Ruebbelke: Hopefully this works.
>> Lukas Ruebbelke: Yea.
>> Lukas Ruebbelke: So, let's do something else real quick.
>> Lukas Ruebbelke: We can, but I don't know man. I don't wanna spoil the pipe's module.
>> Audience: Okay.
>> Audience: What would you call this module?

[00:07:28]
>> Lukas Ruebbelke: So it's currency and then you can set some options on that. To my dear good friends slipping out the back, I will see you tomorrow.
>> Audience: I set my schedule around an end time of 4:30.
>> Lukas Ruebbelke: Wow, I apologize, but I'll see you tomorrow?
>> Audience: Yes sir.

[00:07:43]
>> Lukas Ruebbelke: All right.
>> Lukas Ruebbelke: I don't know how we got Chris Stapleton to come to my workshop but I'm just actually star-struck right now.
>> Lukas Ruebbelke: So widget one at $100. Now let's just.
>> Lukas Ruebbelke: See here.
>> Lukas Ruebbelke: Hm.
>> Lukas Ruebbelke: This is where I get into a bit of shaky ground as I start to,

[00:08:40]
>> Lukas Ruebbelke: Scott, if I start to embarrass myself, so help me, I'm blaming you for-
>> Scott: [INAUDIBLE]
>> Lukas Ruebbelke: [LAUGH].
>> Lukas Ruebbelke: I think I'm doing this wrong.
>> Audience: Yeah. I would never do math on live coding. What. [LAUGH] That's one thing you don't want to do, math.
>> Lukas Ruebbelke: No, I am doing this wrong.

[00:09:56] I'm going to do something else. [LAUGH] Half price.
>> Audience: [LAUGH] That’s it.
>> Lukas Ruebbelke: [LAUGH]
>> Lukas Ruebbelke: Price x 0.5. All right. Am I doing okay? You think this makes sense? Anybody in chat? I know we got some.
>> Lukas Ruebbelke: There's some fairly sharp individuals in there.
>> Audience: It's okay, man.

[00:10:24] It's math.
>> Lukas Ruebbelke: It's just math.
>> Lukas Ruebbelke: I wonder.
>> Lukas Ruebbelke: Yes! That is so rad. I just, how do you say five hours in a week? Auto imports. Okay, so here, I'm just gonna add this.
>> Lukas Ruebbelke: Really pushing my luck here. [LAUGH] That's awesome.
>> Lukas Ruebbelke: I could probably do math here, right?

[00:12:23]
>> Lukas Ruebbelke: I think I've just messed this up, hang on.
>> Lukas Ruebbelke: Let's not do static.
>> Lukas Ruebbelke: Does this look right Scott?
>> Scott: Yeah, it's gonna return numbers, an array of numbers.
>> Lukas Ruebbelke: And so, it's just gonna loop through and just.
>> Scott: Return in the radio. Half price numbers.
>> Lukas Ruebbelke: This is not gonna work, hang on.

[00:12:55]
>> Lukas Ruebbelke: I need to do.
>> Lukas Ruebbelke: I need to do a, but we obviously do this different if I was thinking about immutability but.
>> Lukas Ruebbelke: All right.
>> Lukas Ruebbelke: I said this once, I'll say it again. I mean, that's pretty rad so I have now injected my pricing service into my widget service and I am applying my half off pricing scheme, for everyone.

[00:13:44] So anybody who wanted to buy a widget, you're welcome.