Build Web Apps with Angular 2 Challenge 3 Solution Part 2

Transcript from the "Challenge 3 Solution Part 2" Lesson

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

[00:00:04]
>> Scott Moss: Everybody. Let's just put an input here with a hot dog in a box model. Ecos.
>> Speaker 2: Because that would be hilarious.
>> Scott Moss: InputVal so, will do that and then we will also put like let's change this to InputVal. There you go and we just need to initialize InputVal

[00:00:44]
>> Scott Moss: String, nothing, shazam, and then now when we type in this thing it should update InputVal and it should update it here. So, let's check it out.
>> Scott Moss: [LAUGH] It's still moving. This thing refresh or not, I don't know. Let's see, let's just put a placeholder just to make sure.

[00:01:17]
>> Scott Moss: If you didn't know, I'm like crazy about animations. I love animations.
>> Speaker 3: All right, is this just one library. MG effects or something like that?
>> Scott Moss: Yeah.
>> Speaker 3: First thing I've ever used. It's pretty bad?
>> Speaker 2: Didn't you make that, Scott?
>> Scott Moss: Yeah. Okay, let's see if it works.

[00:01:36] Yay, it works. Two way data body. All right? So how's that working? So, there's this event that we're binding to from this ngModel directive, and it's also named ngModel event. But they're also sending it right back to the template with this property binding, which is going to buy in this model, it's like a two for one.

[00:02:04] So it's like you can make custom events, and this is a custom event, the Angular 2 baked in. So when we get to input and output, this will make more sense, so it was just like what's going on behind here. Wait till we get to inputs and outputs, it'll make sense.

[00:02:26] It's really, the syntax makes it look scarier than it actually is, but it really is just like, "here's a callback, I want to run when this thing happens, here's something that I want to bind this property to". That's really all that's happening, using different techniques like this syntax, observables, stuff like that.

[00:02:44] But in the core, that's really just what's happening. Just like you would normally do, it just looks scary, I know. All right, should I go for the bonus?
>> Speaker 2: Bonus.
>> Scott Moss: Do you want to see the bonus?
>> Speaker 2: Sure, why not. What is the bonus?
>> Scott Moss: Bonus use a local variable using a hashtag or then use a built in directory.

[00:03:06] So let's just do this. So if we click on this button, if we can catch it. [LAUGH] It's moving so fast. Then it will, let's do the asterisk ng now, it will do the NGF on this thing. So asterisk ng if equals show. So if ng4, oops capital I, so ng4 is show, then that's what's going to happen on this click, so right here I'm just going to put a event handler for click.

[00:03:42] And I'm just going to say toggle show. I could also just write the expression in here, but again, I think that's sloppy and it's not testable, so I'm going to write a font shift. A statement, I'm sorry. I could put the statement here itself but I'm gonna write a font shift that encapsulates my statement down here instead.

[00:04:06] Now, I can test this right. So, my component is testable or toggleShow, this.show = !this.show, which is nothing right now.
>> Scott Moss: Of course, now this thing refreshes, and we can catch the button and we click it.
>> Scott Moss: It doesn't do anything because.
>> Speaker 2: [INAUDIBLE] Make sense.
>> Scott Moss: DId I mess it up somewhere?

[00:04:42]
>> Speaker 2: [INAUDIBLE]
>> Scott Moss: I need to what?
>> Speaker 2: [CROSSTALK] Shows nothing.
>> Speaker 4: Says nothing in the h1.
>> Scott Moss: I see. Yeah, you're right. Sorry. I was like, what what? There, there you go. Yeah, thank you. Yep. So, that's the asterisk for the extra credit or the star. And then for the local variable, what's a good one for that?

[00:05:17] We could put a local variable on this
>> Scott Moss: Wow, that's a good one. I guess we could just put right here on this h1, I guess. So we're going to log over right here in this h1 and we can say, message.
>> Scott Moss: Now we have a reference to this input via message.

[00:05:37] And then now I can come down here somewhere else, and just be like pre, and message.value? H1 says, no. .textContent. Let's see, let's check that out.
>> Scott Moss: No, that's not working. I don't know what would be on the h1. That one's pretty boring, let's do a better one.

[00:06:25]
>> Scott Moss: Let's do the ng4, doh. ul,
>> Scott Moss: li and then ng4 equals hashtag nun in [1,2,3,4].
>> Speaker 2: So does the whole template have access to it, or just.
>> Scott Moss: No, only the element and its child element have access to it. The local variable.
>> Speaker 2: No siblings.
>> Scott Moss: Yeah, no siblings, no parents, just this.

[00:07:01] The state is encapsulated by the element itself. Just like Angular 1. Well, that thing disappeared out the screen really quick there. Did you see that?
>> Scott Moss: No, what happened?
>> Speaker 3: Needs to be of instead of in.
>> Scott Moss: Thank you, see, I'm in that habit of doing that.
>> Speaker 3: Yeah, I did the same thing.

[00:07:26]
>> Scott Moss: This is like, ugh.
>> Scott Moss: Cool, there we go. Shazam. All right. So, and then the Elvis thing. They looked and said there was a working example of that on the planks. I reckon they're checking that one out because I'm not having any luck with it. Just not failing for me with or without it, so.