6.4 Adding the Add Lawn Code

Now, it's time to add some functionality to our add lawn component. So the way that we're gonna do that is we're going to modify the add lawn component.ts file, but let's just take a quick look over our component HTML and see what it is we have to do. So we're gonna have to create a new lawn object that has title, address, and size properties, and we could even throw in there the applications and we'll just initialize it to empty. And we'll stick an empty ID in there as well just so that we have everything in there that we need. And then we're also gonna have to have this on submit as a function that when we click this that we can actually send this new lawn to the back end service. Then we're also gonna have to take into account the event that we're going to be providing to the parent called AddLawns. So that we know when we've added a new lawn from the child component, the AddLawn component that we can fire an event, and have the parent do something with it. So let's go ahead and get started. The first thing that we're going to need to do is to go into our add-lawn.component.ts file, and let's go ahead and create that new lawn object. So we're gonna say private newLawn and this is gonna be of type Lawn, so we're gonna have to bring that in obviously from our models just like we've done before. In our constructor we're once again going to bring in our LawnService, so private LawnService is gonna be a type LawnService, and then we'll go ahead and do the import statement for that. And then we're also gonna take advantage of our NG on a knit. In this case as well, but we're not gonna do it quite the same way as we did last time. When this gets initialized, we don't need to do anything with the service just yet. But what we're gonna do, is we're gonna start to fill this out with default values, this new lawn concept. So we're gonna say this.new lawn, and we're gonna set this equal to an object, and we're gonna prepopulate all of the properties that are necessary for a lawn, but we're gonna set them all to basically empties. So we are gonna say_id is gonna be empty, then we are gonna have title is gonna be empty, then we're gonna have address is going to be empty. And size we're just gonna put that as 0, or you could put it as -1, I guess either way would work. And then applications, we're gonna set this to empty as well. So now we have this empty newLawn so that when we first display that model and we show the properties there using that two-way binding, they're just gonna show up as blank, or as the default. Which in this case, my size is gonna be 0, which is gonna be fine. So then at this point, now we're pretty much ready to go ahead and do the onSubmit. So let's create that function. We'll say public onSubmit(), and then at this point what we wanna do is we want to bundle up all of this newLawn data, and then go ahead and use the lawnService to send and add lawn method to our backend service. So let's say, this.lawnService and we want to add a lawn at this point and we're gonna add this.newLawn, and then just like before, because this is an observable, we can subscribe, we'll get the result. And then once we get the result, what we want to do with it? Well, like I said, this is the point where we want to let the parent view-lawn's component know, that something happens so it can show or display this new lawn in it's list. So basically what we wanna do at this point is we want to bubble up an event, so how do we do that in Angular? Well, we're going to create an output in our component, which is basically the equivalent of an event. So we're gonna say, @Output. And this is going to bring in a new import statement from Angular/Core. And then we can define what we want this event to be. Well, we've already kind of defined it previously in the component as AddLawns. So that's gonna be the name of our event, and then this is gonna have a type of event emitter. And event emitter is going to be generic of type Lawn so we know what it is exactly is happening here. And then we can set that equal to a new instance of our EventEmitter of type lawn, just like this. Okay, so now that we have this new event defined, and this is another one of those instances where you have to make sure that sometimes visual studio code isn't trying to help you too much, we do want event emitter but it is not part of events here, so we're gonna have to dump that. This once again is going to be part of angular core, so let's go ahead make sure we are getting this from the right location. So now we can save this. So now at this point what we want to do, is once we have subscribed to this successful addLawn process, then we wanna say, this.addLawn, and then we're going to emit this event, and we're going to pass the result, which is going to be that new lawn. Up to whoever wants to subscribe to this event, in this case, it's going to be our view-lawn component. So this is everything we have to do for -add-lawn, so let's make sure that's all saved. Now let's come back to the view-lawn component as well. Is if we take a look at the mark up here we see that on the addLawn event which we just created in the addLawn componen, we wanna have a function in the view-lawns component called onAddLawn, that takes in an event that can then process that event and then display this new lawn in its list. So let's go ahead and go back into the -view-lawn.component.ts, and create that function as well. So we're gonna say public onAddLawn, and it's gonna take in an event. And really at the end of the day this is gonna wind up being a new lawn. So we can see that this is going to be a new lawn, and then we're gonna say this.lawns, it's gonna be = this.lawns. And then we want to append whatever it is we got to that list. So actually we're gonna use a concatenate, so we're gonna concatenate this newLawn unto that list. So now we can say that. So if we've saved everything, and we have typed in everything properly, fingers crossed, but the time we've saved all this and we go back to our browser. We should hopefully not see any errors and we don't, and we see that we still have an empty array of lawns that are found within our application. So let's go ahead and click Add Lawn. So now we see this new modal, and let's go ahead and type some things in here. So we'll say the title is gonna be Home, Address is going to be 123 Main Street, and it's gonna be 2,000 square feet. So let's go ahead and click the Save button, and now that I've done that, I can come back here and take a look. And I now see that I have this new lawn showing up in my list, with all the appropriate information, Home, 123 Main Street, 2,000 square feet. And then I have actions for all of these. And you'll see that the edit right now has nothing going on in it. But if I hover over view applications, and you look down in the bottom left-hand corner, you see it's pointing to a URL local host port 4200/lawns/ and that big long string is the ID that was generated by MongoDB, and ultimately returned back to me, so that I can now click on that and it can take me to the view application component. Which we haven't completed yet but now you can at least see that it is there. And now we can see that we are persisting data in our database. So now we've gotten to the part where we can add a lawn, how about we can now edit the lawn. So let's start to take a look at the editing functionality, in the next lesson.