6.2 Adding the View Lawn Code

So now that we have our markup for our view lawn component, what we wanna do is, we wanna give it the functionality that it needs. So what do we need to add into the back end of this component to actually make it do something? Well, we're gonna need to populate this collection of lawns, even though there's nothing on the back end just yet, we wanna be able to add the code in. So that when we do add something in, it will work. So we need to populate these lawns. We're gonna need to handle this selectLawn function, as well as this deleteLawn function, and be able to track which of those lawns is actually selected. So there's a couple different operations we wanna do. So we're gonna go into our view-lawn component.ts. And this is gonna be the basic structure, and you're gonna see this on all the other components that we do. The basic structure here is, it's gonna give us a constructor, just like we've seen before, that's going to allow us to initialize or do some dependency injection for anything that we might need in this component, like a service, which we're going to need. And we're gonna do that here in just a moment. And then we also had this ngOnInit, which is a nice little entry point for us to know when our component has been initialized. This is kinda the first opportunity we have to execute some code and do some processing. And we're gonna take advantage of that too. So a couple of things that we need to do, we're gonna need to define a couple instance variables here that we wanna be able to use that we saw in our components. So we're gonna say private lawns and that's gonna be the collection of lawns that we're gonna loop through. And this is going to be an array of lawns and we're gonna need to bring that in from our models. And then we're gonna initialize this to be empty, so there's gonna be nothing there to begin with. And then we're also gonna need that selectedLawn. So we'll say selectedLawn is gonna be an instance of a lawn as well. And that's just gonna be empty or null to begin with as well. So how are we gonna get these lawns? Well, we wanna take advantage of that service that we wrote before, and we're gonna use dependency injection to get that into our constructor. So like we've done before, we're gonna say private LawnService of type LawnService. And when we do that, we're going to be bringing in that type, that lawn service that's found in services, Lawn.service. So now we have access to this. And what do we wanna do with that? Well, the first thing that we wanna do is when we have an opportunity to first run some code in this component namely in the ngOnInit, we wanna do that. So typically the way that I like to do this is I like to create a function that we're gonna be using. So in this case, I'm gonna call this loadLawns. And within here what we wanna do is we wanna say this.lawnService, we wanna use our lawnService. We're gonna say getAllLawn. And I obviously have spelled that wrong. So you could change that to say Lawns. So this would be getAllLawns. And then when we do that remember this is providing an observable back. And the observable is kind of like a promise, so you don't always know when it's done. So what we can do now is we can subscribe to this observable so that whenever it is done, whenever we have actually gotten a response, we can then do something with it. So we're gonna get a response and then once we've gotten that response, what are we going to do with it? Well, we can do anything we want with it but in this case, all we wanna do is say this.lawns Is gonna be equal to whatever that response is. And the reason we can do that, remember, is because getAllLawns is going to return an observable of type array of lawns. So we know that this actual response that's coming back is going to be a lawn array, which we can then just dump into lawns right there. Then, as soon as I'm initially kind of creating applications like this, typically what I like to do is throw a few console.log lines in here, just to be able to see what's going on. So what you can actually do now at this point is say console.log and we can do the lawns. We can at least show what is there. So now that I have this function, I wanna to be able to use it. So in ngOnInit, I'm gonna say this.loadLawns. So then that's gonna execute this function and hopefully go out and get something but we know there's nothing there just yet. And then go ahead and load it into our view. So that's pretty good. So now the other two things that we need to do at this point as well is we need to handle the deleteLawn scenario as well as the selectedLawn scenario or selectLawn. So let's start with select. We'll say selectLawn. And it's gonna take in a lawn, so whichever object we have selected is gonna become the selected lawn. So this.selectedLawn = lawn. So that's not very difficult. And then we're also gonna need to be able to delete. So we'll say public deleteLawn and we're gonna take in an instance of a lawn, whichever one we have clicked on that particular button. And then at this point, we need to figure out which of the lawns in our lists we've selected and then actually delete that one. So we're gonna figure out where in the list of lawns we've gone. So we're gonna get the index of that lawn. So we'll say this.lawns.indexOf, it will find where that lawn was in the list. And then once we have that, we can say this.lawnService.deleteLawn. And then we'll pass in that instance of a lawn. And then once again, we can subscribe to that if we would like. And we'll get back a response and actually we're not gonna really be getting back much of anything. But the reason that I'm doing this is because at this point, once this has completed successfully, I wanna remove that one from the list. And the only way that I'm gonna know which one it is is because I've got this index here. So all I need to do now is say this.lawns. And I can use this splice function. And I could say I want to splice@index and I wanna splice one of the objects, which basically just means it's going to remove one object at that index. And that's pretty much it for now, we're gonna need to add a little bit more in here a little bit later, but this should basically get us started. So let's go ahead and save this, then we'll go back over to our browser, and obviously it doesn't look like much has changed, and we would expect that. But what we could do is we could come in here to more tools and developer tools, and then as you can see here we have array 0. So let's go ahead and refresh this so that you can see this happen again. We'll clear everything out of both the network and the console and let's go ahead and refresh this, and we're gonna get back as you can see here an empty array. And that's what we would expect because we're logging the lawns that we have within our component. And there's noting in our database yet so we're not getting anything back. So now that we have the ability to view all the lawns, let's turn to add in the ability to add a lawn so we can start to see lawns show up in our list.