 Hello, this is Christian. Welcome to Angular. In this video, let's do the put or update of the credit operation using this HTTP client RSJX library in Angular. So this is a scenario here. We're going to send a, we're going to fetch, well, first we actually fetch the data from the remote server first. And we display the data to a form page. We click edit. And then we're going to edit that information here. We send that off to the subscription and then the Angular service will be sending that put request to the server and update that data. So let's go and see how this is done. Okay, so here's our app again. Last time we created the display and the add. We're able to add a one extra flight down here. And so this time we're going to go and say, you know, click on this. And then we're going to edit that information here. And in the form again, we're not validating at all, we just make sure everything, or I sort of think it's going to be correct. And so let's go and see how this is done. And this is the service. So we're going to invoke this function down here. Much if we don't have one year, we're going to create one now here. And so when we update, we actually need the ID number, right? So kind of similar to the get or delete here. So I'm going to put right here, copy this and duplicate that right down here. And this would be for update, just update one. And so it would say update flight. And it takes the ID and also the payload. Okay, so two things. So this would be the flight of type flight. And then we're going to send in the URL with no ID. Actually, it does right now with ID, this ID matches the ID. And then the second parameter is the payload. In this case, it's the flight information. Okay, so let's see. Let's see here, what's going on overload matches this. Oh, yeah, this is going to be a not gap. It's going to be a put that's why. All right, so here we go, we got that function all set up. And we're good here, you can close this now. And let's load our edit. This is the one here. This is the source and this is HTML. Okay, so we have things all set up here. When we submit this form, going to send in this f object that ng form to the submit function is going to get all the data. Now we need to bind to a data. Okay, so as you can see, nothing's binding here yet. So we need to fill that in. And then the red bottom here and see when we submit the submit type. Yeah, so we just need to bind this data here. So first, let's do it and fetch our service. And I'm just going to put it here so it doesn't air out, but we're going to change this. So we need to get the ID number. That's one thing. And this time, because we're fetching data remotely from a different server, we cannot use this use the snapshot. Okay, you want to use the asynchronous call, which means going to get it from using a different method here. Very, very identical to the snapshot, but we're not going to use that one. And also we're going to inject the services in here as well. So let's do that injection first. First, I'm going to inject the flight service. There you go, we got that. And then to get the parameter on the URL and the ID, we need to also inject another one called the route activator router, activator router. Okay, so this one here. This token allows us to fetch any parameter or all the parameters in the URL. And one of those parameters that we want is the ID. And that is what we set inside our router, right, if you. So here's the route when we pass to the edit, and it fetch an ID. So this is the field that we want to grab. Whatever you call it, this is one of them if you can have a lot of IDs or a lot of fields, you can fetch those as well. And and use that. So now, and that's what this ID is for. Okay, it's the actual number of this route. Okay, so in the ng in it here, what I'm going to do is I'm going to get this route ID first. So I will say this dot route dot param app, okay, we're going to call the param app here. And this param app, we have to subscribe so you can see subscribe again. And we subscribe, you can see that the observer is, you know, send back some data. Okay, so, so here we have really a parameters object, usually have a lot of them, we're going to pass that to the function, and then I'm using the error function here. And all I'm doing just one data. So it's not a big deal you could have, you can you have a single line output here, separate line away. So I'm now this parameter here has access to the parameter I mean, in the URL, I'm going to sign this ID from this parameter group. So this ID is equal to the programs that get and the get function here, you can see the string of the field or properties, or token, right, URL token. And that's what we're going to get. And there's an error here is what it says. ID number, and we got a string. Yep, so we say it's a number, but we're getting a string. So it's a conflict here, right, so either you can turn this off to say any. But we don't want that because the actual ID and the database is a number. So you want to basically just cast this to it. Okay, you wrap the whole thing, and convert that to integer, and they'll be assigned to enter, and we're going to go. And actually, this is not, this is the function, and then I need to close it with the curly, right there. I have too many curlers and that one for this one here. That's for that. And I need one more for that. Yeah, it's a lot of them. And then that's the subscription, we're going to close that and this is extra one. Yeah, that's why it's easier to put in the separate line like this. Okay. So now we are done with that one. That's all I'm doing. I got the ID already. And then once you get that, then you can call a function maybe like to load the data. So I guess I just call it load function here load data. We'll get this data from the service. Okay, I'll create it right here. Load data. And this function is going to call this service and then pass the data of the ID to it to fetch the data back. We assign that data to this flight data here. So let's say this dot flight service dot get we need to get first get a single flight information. Okay, and then the ID is this ID that we just we see from the URL. Again, you have to subscribe to okay, if you don't subscribe, you're not going to get any data back. So it won't work. That means I have to go here and put here the dot subscribe you put in separate lines easier to see that way. And then the data coming back in the observer is going to be the data, the payload. And then we can set this flight equal to this data that came back. Okay, so this data here is the one that is sent back from the server based on the ID we sent to it. Okay, so now then this will be populated and so instead of just the empty object here, I'm going to assign this to as a class. And so I don't want to say this either if I just do this, I might get an error. This is the flight class for imported. This is the class that we have. And that's this one here, right? It's a class we you can use it as a, as a, I mean, if I do an assignment, not some, I mean, a type, type flight like this, it might error out because, you know, initially when you run it, there's no data yet. And it's going to be displayed on the browser already. At that time, all these that you ID and so we're not not there yet. So you might have an error. And so now we got that done. And then so, so here I need to say, instead of assignment, I mean, type to say a new flight. It's object. Okay, we'll test the other one if, if it works, but usually this is what we may do. Okay, for edit, you have to pre-populate this with data first, and then this comes later. So now, in our form, we need to bind this data now. Let me close this over here. So the flight ID needs to bind to, so I do the two-way data binding. Okay. So ng model is combined to the flight.id. That's the one. And I'll just copy this, put down here for the, this is the flight number. So flight number. Oops, flight flight number. And then this one here is the airline. And it's really hard to see. Let's do this. Okay. This one here will be the trip type. And this one here is departure airport, arrival airport, departure date, and then arrival date, return date, I'm saying return date. Okay. So I think that's it for this one. Let's see if it loads. Let's go check it out. Browser. It did already. It was great, right? So again, if you refresh it, go back to the flights, go to show flights, and let's say I want to edit this one here. So there you go. It grabs that information here. I go back and do number four and so on. So it loads very beautifully. Now I mentioned earlier that if you don't subscribe, it's not going to work. So for example, if you go back, and if I don't subscribe to this function, if I just say, you know, I terminated that here. Okay. And if I leave that out like that, and if you do something like this, that flight equals that, right, it may not work because I need to subscribe to that. So type of any and have a conflict because it's a different type. So I have to maybe ask a flight. That's observable. Yeah, it's a different type. So if you don't invoke it, it's not going to work. Let's see here. Okay, I'm going to force it to type any. And so if I save this now and go back again, let's see if it lets me. Okay, so you can see that no data comes through because we didn't really invoke it to make it happen. So that's why it's important to make sure that you subscribe to that in order for it to work. Okay, so I'm going to just undo this. So we subscribe to that and then we're good here. And so now when we edit, we click the submit button, we're going to do the edit here. And then we have to also submit to be true once we're done. So again, when you submit the changes, you have to subscribe. So flight service, we're going to do a update and update takes two parameters. The ID, so with this ID and the payload will be just the f dot value. Okay, all the values coming from the form. And again, subscribe. So the data is the one that's coming back, right? This is a function, but we need that parameter. And then I do two things. One is I'm going to say this stuff submitted is now true. And that's it really. But we also can console log the data, the original data. So form the f dot value and then also log the data coming back, which is in the case of data. I think maybe just the same data coming back. So let's see what happens. All right, so let's go into the site and refresh our page. And I'm going to edit the first one. Just change that to one, two, three, four, five, six, seven, eight. Pretty long one and submit. It says submit already. Let's go check it out. And there you go. We change that to that field. So it works. And I can change it back again to just one, two, three, four. Actually, before I change it though, I want to show in the database to make sure it really does work. So we change that to one, two, four, five, six, seven, eight. I load that and you can see that the field here has been changed because the new update. So now let's go back and change it to one, two, three, four again, submit, and then it's back again. So last thing is again, just make sure you subscribe. If you don't subscribe, you just leave it like this like that. It's not going to work. Okay. If you just do like that, let me turn this off. And so if I save this, even though I don't put the true thing here, well, let's say this that submitted is true. The fourth set to be true as if it's been submitted. And now let's go back and edit the first field. I'll put here, you know, five, five, five, five, click submit. It says successfully added. It says submit it, edit it, but you can show that it didn't change, right? It didn't change the data. We can also show the database, refresh it. You see that it did not reflect that here at all. Okay. So make sure you really invoke that function at the service using the subscription or it won't work. Okay. That's really important here. So that is the put operation or edit. And if you have any questions, just let me know and I'd be more than happy to answer your questions.