This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 3 Solution Part 1" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott walks through the solution to challenge 3.

Get Unlimited Access Now

Transcript from the "Challenge 3 Solution Part 1" Lesson

>> [MUSIC]

>> Scott: All right so the first thing we're going to do is a template expression via interpolation. Okay, simple enough. Let's do that. Let's put some interpolation here. And say message. So message is going to be a string which is going to equal hey. Pretty boring message. Boom. So let's serve that up and see if that works.

>> Scott: No. Oops. I forgot to npm install. This is gonna take forever. [LAUGH] So let's just assume that works for now, we'll come back when it's done installing.
>> Speaker 2: Give me the benefit of the doubt.
>> Scott: The next thing is we're gonna do a property binding. All right, cool.

[00:01:00] Well there's really not anything interesting we could bind to in this h one so let's just make some real HTML here. Let's just say, widgets, here. And then we'll go back to our h one example that we had. And we'll use the same thing that we had, which was message, cool.

[00:01:24] And then let's just use a button. That's pretty awesome, pretty simple. Click. Actually, we've done button before. Let's do something different. Let's try something else.
>> Speaker 2: Center, A mouse over.
>> Scott: A mouse over? What about a scroll? Let's try a scroll. That's usually a big killer for performancing.

[00:01:50] Let's try that. Let's see a scroll. So we'll do a scroll here.
>> Scott: Scroll. [LAUGH] So we'll bind to the scroll event, and when that happens we'll say, handle scroll. Boom. So now we need to come down here and we need to say, handle scroll. This is gonna be a lot, hopefully it doesn't work break.

[00:02:28] Okay.
>> Scott: Scroll.
>> Scott: Well obviously don't have anything to scroll so lets make this thing scrollable. And we'll add some styles here.
>> Scott: And we'll say dot scroll class. Height of
>> Scott: 100 pixels. Width of
>> Scott: 300 pixels. And then we'll say, overflow
>> Scott: Scroll. Cool, so that thing's gonna scroll and we'll just put some stuff in here like

>> Scott: 20 pixels.
>> Scott: Oops. This is a shortcut that I'm using.
>> Scott: Aw, what? Really?
>> Speaker 2: It's what happens when you've got 19 updates.
>> Scott: [LAUGH] I can't do that Emmett? Really? Okay, whatever. I tried to do like, I'm using error for these short cuts but it's like not, this is why I don't use sometimes.

[00:04:03] It's really ridiculous. Cool. So we got all that. So now let's check out the scroll. Let's even make it so it definitely has to scroll here. Okay, so let's check it out. So now let's see handle scroll. Yeah! It all installed.
>> Scott: All right, so let's go here.

>> Scott: All right and then, widgets.
>> Scott: Where is that widget at?
>> Scott: Widgets, widget, handle scroll. Why is that thing not on the page? Let's save that again. Yeah.
>> Scott: I'm just saying.
>> Scott: Any errors? Hm. No errors.
>> Scott: What? Let's see what's going on here. Look at that.

[00:05:34] It's not even showing up somehow. It's too small.
>> Scott: There we go. Cool. Okay. So now, on scroll, we had a contant dot log. It's already got 43 in it, so there we go. Scroll it. So it pretty much handle any event.
>> Scott: All right, so the next one we need to do is, I did the event binding.

[00:06:21] Supposed to be property binding first.
>> Scott: But now let's do the property binding. Let's bind a property to, what's a good one?
>> Speaker 3: Do like Is Scrolling?
>> Scott: Is Scrolling. Okay. That's complicated, you know what, let's see. What about the input? Let's do a property binding on the input to the placeholder.

[00:06:53] Nope, placeholder is an attribute, not a property, I believe. Or is it? Let's see. Placeholder. All right, I think that's just an attribute so that might not work. Let's not do that. I know what you can do. Let's try a, we will bind to an attribute property. So some of the small cases I said where you can actually bind to attributes, this is the one.

[00:07:24] So we'll bind to the style dot transform property. Yeah, that's what we'll do, style dot transfrom. And then what we'll do is move this button here, style transform equals and then we will say x position. Cool, so then what we'll do, we'll make a constructor.
>> Scott: And I will say this dot

>> Scott: Transform.
>> Scott: Which does nothing right now and then we'll make a transform method.
>> Scott: Which this dot.
>> Scott: x position,
>> Scott: Equals 30 pixels. There we go. Or no. Zero pixels, zero pixels. This dot exposition equals, I know what we'll do.
>> Scott: Zero. And then we'll do this one at interval.

>> [SOUND]
>> Scott: Yup, I need to put pixels.
>> Scott: Whoa, is this getting complicated.
>> Speaker 4: [LAUGH]
>> Scott: But I think it's done now.
>> Speaker 4: [LAUGH]
>> Scott: Oops, I got it backwards, hold on.
>> Scott: There we go.
>> Speaker 4: [LAUGH]
>> Scott: All right, let's see if that works. So, wait, that's still not right.

[00:10:07] It needs to be translate x.
>> Scott: There we go. Now, it should work. Really complicated, but I need it to be complicated on purpose.
>> Speaker 4: [LAUGH]
>> Speaker 3: That's what he's telling himself. Yeah.
>> Scott: Actually, let's do this.
>> Scott: This is not for you guys to copy. So, if you try to copy, like don't.

>> Speaker 2: You're saying we're not good enough?
>> Speaker 4: [LAUGH]
>> Speaker 2: Is that what you're saying?
>> Scott: No, I'm saying I'm not good enough.
>> Scott: There we go.
>> Speaker 3: They're taking bets in the chat room if you're gonna pull this off.
>> Speaker 4: [LAUGH]
>> Scott: All right. Let's see. Let's check it out.

[00:11:01] All right, so stuff. [LAUGH] We'll see what happens with this. So we have this thing- There's no way for me to recover after this.
>> Speaker 4: [LAUGH]
>> Scott: That's transformed and it's gonna translate by this. So, and I'm gonna doing new transitions so it's probably not gonna be smooth but we'll see what happens.

[00:11:21] It's working.
>> Speaker 2: [LAUGH]
>> Scott: There we go so I'm binding to this style attribute.
>> Speaker 4: [LAUGH]
>> Scott: I'd like to bridge it.
>> Speaker 4: [LAUGH]
>> Speaker 3: Let's talk about it later.
>> Speaker 2: That could have been in a mouse over.
>> Scott: Yeah, I mean I can make it nice. We can, if I want to make it nice, I can just come up here and we could do this.

[00:11:47] Button.
>> Speaker 3: I just realized what's happening. Scott doesn't want to do the router module, and he figures if he just stalls we're going to be like, sorry.
>> Speaker 4: [LAUGH]
>> Speaker 3: Your module today.
>> Scott: Transform .3 seconds ease in. There we go, now it'll be smooth-ish. Let's see if it reloads.

[00:12:16] Hey, there we go. See [LAUGH] So yeah so that how you bind to
>> Scott: Properties.
>> Speaker 4: Yup [LAUGH]