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

Lukas covers the solution for Challenge 7 as well as demonstrates a couple of debugging techniques.

Get Unlimited Access Now

Transcript from the "Challenge 8: Solution" Lesson

[00:00:00]
>> Lukas Ruebbelke: Let's just check out this challenge here. So we are going to create a form to edit our widget or selected widget item. In doing so, because shared mutable state is bad, we are going to create a lifecycle hook to isolate that mutation to the widget detail component.

[00:00:21] Then interesting enough, I had a button to save and cancel. But we looked that up in the previous challenge and then using ngForm, let's add in some validation. All right, what say you,
>> Lukas Ruebbelke: Let's jump into the code,
>> Lukas Ruebbelke: And I'm just going to delete this.
>> Lukas Ruebbelke: And because of that, I'm going to delete this,

[00:00:55]
>> Lukas Ruebbelke: And this. And so now we are back to, I think kind of the bare metal here.
>> Lukas Ruebbelke: So far so good? So I just deleted the form, we're now just sending in a selected widget.
>> Lukas Ruebbelke: So what I'm going to do for the same of time, I'm going to go to Item-detail.component.

[00:01:27]
>> Lukas Ruebbelke: And I'm going to just copy this form. Cuz it would be incredibly boring for me to do this by hand.
>> Lukas Ruebbelke: We go back to widget detail, and I'm just going to paste this in. Now what I'm going to do, so I don't jump ahead too much.

[00:01:52]
>> Lukas Ruebbelke: I'll just leave this off, after this back in in a minute. Let's change widget do this, let's go selectedWidget. Of course, my template is going to be like what? This doesn't exist.
>> Lukas Ruebbelke: Widget Description, enter a description, and here we go. So now the problem is we do not have on our template.

[00:02:25]
>> Lukas Ruebbelke: A selected widget property. So first and foremost, let's go selectedWidget: Widget.
>> Lukas Ruebbelke: And then from here we're going to convert this to a setter, so we just go set,
>> Lukas Ruebbelke: And it becomes now a function.
>> Lukas Ruebbelke: That takes a value property,
>> Lukas Ruebbelke: Which is of type widget.

[00:02:58] And so now what we can do is go this.selectedWidget = Object.assign, and we're going to use an empty object. And we're going to copy, essentially we're taking value and we're cloning it into this empty object, okay? And let's see if this even renders.
>> Lukas Ruebbelke: Snap.
>> Lukas Ruebbelke: Okay, let's go back up here, wait hold on.

[00:03:36] And I'm not even throwing errors, yes, amazing. All right, let's go back to our,
>> Lukas Ruebbelke: Template here. And so now we're checking for widget, which no longer exists. Because we're essentially intercepting it and setting it to selectedWidget. So what we can do here is say, selectedWidget,
>> Lukas Ruebbelke: And let's just go,

[00:04:11]
>> Lukas Ruebbelke: originalName.
>> Lukas Ruebbelke: Back into our component. Let's go originalName,
>> Lukas Ruebbelke: And I did something here that I don't remember.
>> Lukas Ruebbelke: Just gonna copy it, cuz no point in rehashing the wheel. So go to widget, detail, component. So essentially what we're doing here is we're just checking to say this are widget.

[00:04:59] If so, set the originalName.
>> Lukas Ruebbelke: We'll safeguard here, and let's refresh.
>> Lukas Ruebbelke: Let's go back, and I did something wrong in the template.
>> Lukas Ruebbelke: If no,
>> Lukas Ruebbelke: Right, so here, we'll just check for ID.
>> Lukas Ruebbelke: Let's refresh.
>> Lukas Ruebbelke: There we go. Select a Widget,
>> Lukas Ruebbelke: And now we're passing it in.

[00:06:07] So let's just look at our markup real quick. We have a form and we are simply binding these two inputs using ngModel to our selectedWidget name and description.
>> Lukas Ruebbelke: So far, I think pretty simple that if we wanted to actually edit even another property. We would just add another input and bind to that property on that object.

[00:06:39] So for instance, if we go here, let me just look at the interface. So if image name, so we have these various properties. So if we wanted to edit for instance featured which a boolean, we probably want to do a check box. But that could be done, so we could just extend out.

[00:06:54] For now, we're just doing name and description. So let's kick this up.
>> Lukas Ruebbelke: We also don't need that. And so now if I want to get a reference to the underlined form group on this form how do I do that?
>> Speaker 2: The form name?
>> Lukas Ruebbelke: What's that?
>> Speaker 2: Is it pound form name?

[00:07:24]
>> Lukas Ruebbelke: Equals, wo we need a local variable that you need to point it to something.
>> Speaker 2: ngFor.
>> Lukas Ruebbelke: Close.
>> Speaker 2: ngForm.
>> Lukas Ruebbelke: ngForm, yes, awesome. So we'll go myForm = ngForm. And so now let's go, just so we can check this out.
>> Lukas Ruebbelke: Also we have had some questions about actually debugging.

[00:07:54] And there's kind of some various levels, so I just give you a couple techniques right out of the gates. So the first thing that I like to do is pre-tag and then jump or dump rather my object into the template. And then using dollar JASON, I can basically convert into a JSON structure, and see it.

[00:08:20] So this works most of the time. Occasionally,
>> Lukas Ruebbelke: You'll reference something. So for instance, if I just tried to do my form, without actually value or valid, it would throw up. So two JSON does not handle circular references too well at all.
>> Speaker 3: Wouldn't that be a good use for the object assign, since you get a shallow copy?

[00:08:43]
>> Lukas Ruebbelke: Interesting. I think I've actually tried that, but that's a really good question. So the question is, would this be a good use case for object.assign?
>> Lukas Ruebbelke: Let's see what happens.
>> Lukas Ruebbelke: If this works, I am gonna jump over that table and give you a high five. That or I'll fly across or I'll hop onto the drone, and I'll have Mark fly me over there.

[00:09:23]
>> Lukas Ruebbelke: What the duce?
>> Lukas Ruebbelke: The reason being is it actually, for security reasons, it's not going to let me evaluate this. So there's other ways to do that, but unfortunately that was a really nice idea. I mean I was so hopeful in my heart.
>> Lukas Ruebbelke: All right, no errors.

[00:09:56] So now we can see our form, so myForm. And then we select this, it's valid.
>> Lukas Ruebbelke: And Cancel, which actually does nothing in this case. But we'll go here, we'll go here.
>> Lukas Ruebbelke: And it appears that somewhere along the line, my CSS styles are style in place. Let me check.

[00:10:32]
>> Lukas Ruebbelke: So this is why we're seeing this.
>> Lukas Ruebbelke: But more importantly, let's add a validation. So we've been playing around with this ngForm reference. I'm going to drop this out and,
>> Lukas Ruebbelke: What I am going to do,
>> Lukas Ruebbelke: Here.
>> Lukas Ruebbelke: disabled,
>> Lukas Ruebbelke: myForm.
>> Lukas Ruebbelke: It's disabled if it's not valid.

[00:11:23]
>> Lukas Ruebbelke: Notice I can't click this.
>> [NOISE]
>> Lukas Ruebbelke: Now I can.
>> Lukas Ruebbelke: And now I cannot. So it's a pretty easy way to destable input. Yes?
>> Speaker 4: Are there max character things that you look at?
>> Lukas Ruebbelke: There's a whole bevy of options. All right, so we are almost out of time.

[00:11:51] We have about 30 minutes. And so I really, really, really, really, really wanna get it to server side communication.
>> Lukas Ruebbelke: Yes?
>> Speaker 4: You had mentioned the shadow yesterday, you gonna be able to get time for that?
>> Lukas Ruebbelke: So I can elaborate on that quickly. That under the hood, anytime you assign a style to a component that Angular, what it does is when it generates the DOM.

[00:12:19] It assigns essentially this quasi generated class to it. And then it assigns all of those component specific styles to that class. So now you have this ultra specific essentially, CSS selector that will only work for that component. Now let me see if I can actually show this here.

[00:12:41] That,
>> Lukas Ruebbelke: So you notice here, ngcontent-mech-5 or whatever this is. So you see that? This is completely happening under the hood. And then if I go up to the top,
>> Lukas Ruebbelke: Somewhere in here.
>> Speaker 2: Yeah, it's there. It's there.
>> Speaker 3: It's down a little bit.
>> Speaker 2: You can see the selectors.

[00:13:11]
>> Lukas Ruebbelke: Yeah, so you can see now it's assigning that on there and then this becomes super specific. And so that's how that gets encapsulated, and so it just kind of works. So when you put it at a component then it will be for that component and its children.

[00:13:27] And that's that.