This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 7: Solution" Lesson
[00:00:00]
>> Lukas Ruebbelke: I'm gonna do the solution for this challenge and I'm going to get into component-driven architecture. So hopping into the code. Let's actually just, cuz I know where I'm going here. I'm just gonna queue up widgets. The goal is to wrap this into a form. All right, so item detail component.
[00:00:19] I'm just gonna copy this and let's hop into the widget component.
>> Lukas Ruebbelke: And let's go ahead, and I think I wanna be down here.
>> Lukas Ruebbelke: Let's paste this in.
>> Lukas Ruebbelke: Now there's a few things we're going to change, because obviously we're moving from items to widget. So do a little bit of a copy paste job here.
[00:01:11]
>> Lukas Ruebbelke: What I wanna focus on here is that one, edit a form. I did create a reference to ngForm, called my form. So this is kinda carry over from the previous, damn I did during the module. But I have an input and using ngModel, I'm just binding it selectedWidget.name and selectedWidget.description.
[00:01:40]
>> Lukas Ruebbelke: And so, if we didn't do anything else.
>> Lukas Ruebbelke: Just refresh the page. Let's see, I probably, what did I break?
>> Speaker 2: So, you have to select a widget.
>> Lukas Ruebbelke: Yeah, so
>> Lukas Ruebbelke: What we're going to do here. So this brings up an issue that is solved in the items detail component that we haven't brought up yet.
[00:02:11] And that is, we are using the same form for creating an item and updating an item. Because essentially the form is the same. So I've seen it done where you're actually swapping out the forms, so you have an edit form and a create form. In most cases I think you can use the same form, and then just detect like is there an ID or not?
[00:02:33] If there is not an ID, it's a new thing, go ahead and create it. If not, then go ahead and update it. And so, this form is always bound to an object in this case a widget. The problem is that widget doesn't exist until we select something. So what we need to do is pre-populate our selected widget with an empty widget, because if we're not editing it, we're always creating it, so ABC, Always Be Creating.
[00:03:07] So let's go here. And what I'm going to do, is, I'm actually going to create a reset method. And I'm just going to go this.selectedWidget equals ID null, name is an empty string and description is also an empty string. And so, what this does is it just says, hey I wanna reset.
[00:03:34] So it just creates an empty widget object. And from here this.reset, so I'm just gonna call it every time the form loads, we just call reset. So we're basically populating it. Any time it loads it's getting a brand new object.
>> Lukas Ruebbelke: Let's see what's going on with widgetsService.
[00:03:59]
>> Lukas Ruebbelke: I've no idea what they're talking about there. And this white space drives me crazy. It's probably in there for a good reason. Let's refresh the page. You can see now it worked. So this is one thing that you will run into it's like, I'm trying to bind into it's not happening.
[00:04:18] So what you wanna do is control how the form is initialized. And so by doing a reset method, I am essentially pre-populating it with kinda this new pristine widget object, that I can then start to edit.
>> Lukas Ruebbelke: What I can also do, since I'm here, is, I'm going to create a cancel method.
[00:04:44] And whenever somebody clicks cancel, well let's just call reset. And then from here we'll go back into the template.
>> Lukas Ruebbelke: I'm just going to call, cancel.
>> Lukas Ruebbelke: So what this allows me to do is if we go here, select, cancel, select, cancel. So also extracting out that reset method, we can call it in a few different places and it becomes one more useful than it would be if it was just tucked in somewhere but it's also a very easy method to test.
[00:05:32] One thing I will do as well, I'm noticing that the layout is a little not up to par. So often times I'll just hop in, pull in the styles, I don't need that. Let's go here.
>> Lukas Ruebbelke: Paste this in. Yeah, it's starting to look good. Okay, then, feeling I was supposed to do something else.
[00:06:03] Let's just hook these buttons up.
>> Lukas Ruebbelke: So on submit, let's go ahead and call save
>> Lukas Ruebbelke: In the component itself, we just go
>> Lukas Ruebbelke: Save. Takes a widget.
>> Lukas Ruebbelke: SAVING WIDGET, so we're just gonna trace this out for right now.
>> Lukas Ruebbelke: One thing we will do. Obviously once it's saved, we'll go ahead and reset as well.
[00:07:02] So this is where small fine grained abstractions are really handy. So here, cancel this. Let's go ahead and create a new one. Save let's see passing it in. Because if we don't have an ID it's null. If we wanna say, what do we call create or update on our service to send it back or do we check on the ID and go from there.
[00:07:31] Then you can see that is well, my did have a local reference created, my form it was ngForm that was then using to disable or enable the submit button. Yes?
>> Speaker 3: When we are doing that for the attribute disabled we may not have the square bracket, right? Because it's not actually property binding across the class and-
[00:07:59]
>> Lukas Ruebbelke: Well, let's see what happens.
>> Lukas Ruebbelke: So right now, because it's not being bound, it's just going to render this as a string.
>> Speaker 3: Have a difficulty process for that, no? This type-
>> Lukas Ruebbelke: First of all, let's see if this is.
>> Lukas Ruebbelke: Inspect the
>> Speaker 3: It'll put a little value there.
[00:08:31]
>> Lukas Ruebbelke: Yeah.
>> Lukas Ruebbelke: So I think you could, I would need to look at the style guides, but I think that is
>> Lukas Ruebbelke: Considered kinda a anti pattern. You would wanna use property binding instead, but let's just see. This is a very kinda a AngularJS way to do it.
[00:08:52]
>> Speaker 3: Okay.
>> Lukas Ruebbelke: So it does work personally, I would use property binding and do it that way. But good point. You could do it. You don't see a lot of it, because binding has been expanded out to include properties and events