6.5 Adding the Edit Lawn Markup

At the bottom of our view loan component, we're still left with a little bit of editing functionality in a model. So let's go ahead and uncomment this. Now, I had to make a slight modification just so that you'll be able to see this model show up and that gonna bunch of errors in our browsers. So lets go ahead and save this, just that you can see what this gonna look like and interestingly enough. This is gonna look strikingly similar to what the ad looked like so we're gonna have another model pop down here and you're gonna see edit lawn works. What I had to do to get it to the point where you could at least take a look at it was I had to go into my component and I had to add this input statement. Now, we haven't talked much about it. We'll talk a little bit more about it in the next lesson. But just suffice to say that it's similar to the output that we talked about in the Add Lawn Component, where the output is like an event that we're raising. And the input is a way for us to take into our component some piece of data from somewhere else as an attribute. And that's what we wound up doing here, because within here, within the app-edit-lawn component, we have this lawn property that we're passing in. So we're passing in the selected lawn, and that's why we put that in there. But anyway, we don't really wanna be seeing this generic edit-lawn works. We know that it works, but now we need to add in some markup. So let's go ahead and see what we can do to fix that up. And what you're gonna see is that this is going to look strikingly similar to the add lawn component. So what we're really doing here is we're creating another form just like we did before we had a non submit. We have two-way binding on ngModel. We're going to have this lawn property or this lawn object that exists within our component, which is ultimately gonna be taken in from the parent. And that's why we needed that input into our component, so like I said, we'll take a look a little bit more at that in the next lesson. And we're just binding to these inputs, the existing title address and size and then we have a submit button here. So if all this is typed in correctly and we save it and we come back and refresh as you can see here, and I hit the Edit button. We're now gonna see another form here so we can see all the pre-populated data. We see home, we see 123 Main Street, we see 2000, so we see the appropriate edit dialog for whichever one we're selecting in here. So let's go ahead and add another one and just to see how this could work again. So I could say another home, and then we'll say maybe this is 555 Fifth St. And this one is going to be a thousand, 10,000 square feet, something really big. And hit Save. So now, we see we have two entries here and I can hit edit on the second one, and I'm gonna see another home 555 Fifth St. and 10,000 square feet. So now, we're creating the appropriate model for editing the details of a lawn. And now we want to be able to submit those changes to our backend service. Let's go ahead and take a look at that right now.