6.8 Adding the View Application Code

Now we have seen something a little bit similar to this in the past, but there are gonna be some new concepts that we're going to introduce along the way. So we are gonna have to get this lawn, so we already know that, and populate it with the applications, we've kinda seen something like that before. But now we're also gonna have to deal with the fact that this is part of the routing engine that we put in there before. In that when we go and navigate from lawn into the actual applications, we're passing over not a full lawn object but only the ID of that particular lawn. So how do we get a hold of this id? How do we use that in our component if it's coming from a previous route, or things like that? And those are some of the things that we wanna touch on in this lesson. All right, so let's start with some of the basics, and then we'll work our way up. So we're gonna go into our component.ts, and we're gonna do a couple of things in here that we've kind of already done before, so it shouldn't be anything new. So we're gonna need two private variables here, one is gonna be the selected application so we've kind of done something similar to that previously when we were dealing with the lawns. Then we'll go ahead and bring that in from our models and then we are also gonna need a lawns, so we're gonna need to figure out what lawn it is we're dealing with. Even though we're not really having that lawn passed into our component but just the idea as part of the URL, so we need to figure out how to handle that. We're also gonna need to make some network calls, so we're gonna need our service. So we're gonna say private lawnService is going to be of type lawnService. So we'll bring that in, and then the way that we're kind of gonna be able to take advantage of this routing is we need a little bit of help. We need to know what the route is where we are and what the route parameters are. And the way we're gonna do that is we're gonna use some independency injection again, and we're going to get the current route and that's gonna be of type ActivatedRoute. And what that's going to allow us to do is to look at how we got to where we are, to what component we are. And look at the different parameters of that route, is there are body and all these different types of things. We can start to look at that using this activated route, so we'll get there in just a minute. So what we really wanna do at this point is we really don't ever wanna show errors or anything in the browser when we're first loading this up. So to kind of avoid that when we first load this up, we're going to give this lawn some properties, even tough they're kind of empty at this point. Just so that we avoid some of these ugly errors that could show up because nobody really wants to see that. So we're going to initialize a lot of these properties, just like we've done before. With the lawn and we're gonna go ahead and basically keep them all empty cuz we just wanna keep things nice and clean from the users perspective. Applications are gonna be empty, so this is what the initial lawn is gonna look like, before we've actually had a chance to retrieve it. So now we've initialized it, even though it might take a few moments for us to actually retrieve it at least we won't get anything too ugly. Now what we're also gonna need to do is we're gonna need to get the parameters. And be able to figure out what the idea is and then ultimately use that to create a request to send out via our lawnService. So this is where things get a little bit different, so we're gonna use the route that we brought in via dependency injection. We're gonna say this.route and we can go into params and the interesting thing here is this is actually an observable, if you see here, so we can't just use it directly. We actually have to subscribe to this and we're going to subscribe or we're gonna call what we're getting out of this params, because that just kinda makes it a little bit more sense. And then we can say this.lawnService. And we wanna use the getLawn function, because we wanna get an individual lawn at this point. And what we're going to pass in here is going to be params, and we wanna get the parameter that has the name of id. And then once we've done that we're going to be getting back an individual lawn, so we're going to subscribe again so we have some nested subscribes here. And then we're gonna have a result and then that result is gonna be set to lawn. So just like that, so nothing too crazy there, just a little bit different because we have some nested subscribes and we're dealing with this new activated route. But it's really not overly complicated. So that should get us the initial lawn so that we'll be able to see what are the current characteristics of that lawn, as well as the applications. But now we also need to be able to handle a couple other things, so we wanna be able to delete an application. So we're gonna say public deleteApplication. And we're gonna wanna delete a specific application that's going to be of type application. But at this point you might be saying to yourself well Derek we don't have any operations on our service that deals with applications, we don't have a delete application or an add application. And that's true, and the reason that I did it that way is because we're really just always dealing with a lawn. And we can update a lawn and updating a lawn can consist of modifying the applications array that is a property of a lawn. So when we're deleting an application, we're really just removing it from the applications array that lives under a lawn, and then we're just updating that lawn. So really, that's kind of the basic process that we're gonna follow here. So once again, we're gonna have to go in and we're gonna have to get the index of the application that we're dealing with. So we're gonna say, this.lawn.applications, and we're gonna go ahead and get the index of the application that we want to remove, so that we can correctly remove that one. Then we'll say, this.lawn.applications, and we'll use splice. And we're going to splice at whatever index it was found at, and we're gonna splice one off of that list. Then we'll say this.lawnService.updateLawn, and we're gonna parse in this .lawn. And once again we will subscribe and we will get back a result which will be the updated lawn, and will simply say this.lawn is gonna be equal to result. Okay, so that's really not too bad. So once again we don't really have any operation specific to delete an application, but we can kind of do it in a roundabout way and then just update the entire lawn. So now we've done that, so now we have to be able to select an individual application just like we've done previously for the lawn, so we'll do the same thing. We'll say selectApplication, and we're gonna wind up selecting an application of type application. And once again, this will just be this.selectApplication, is gonna be equal to application that we selected. So this should take care of most of what we need to handle, at least for the absolute bare minimum. So let's go ahead and save that, we'll come back into our application, and let's go ahead and go back to lawns. And we'll refresh this just to make sure everything is accurate. All right, so we have Vacation Home and Another Home, so we'll click view applications. And now you can see at least we're getting the Vacation Home Lawn Applications, but one again there's nothing there. And that's okay, we're not too worried about that. We need to add in the ability for us to add applications and edit, and all that sort of good stuff. But at least for the time being we can see now that we're able to pull and identify the fact that this id that we're passing through in the route is associated with the vacation home lawn that we've created in the previous page, so that's good. So in the next lesson we're gonna go ahead and start to bring in the add application components so we can add applications to a lawn.