 Hello, this is Christian. Welcome to Angular. In this video, let's do the delete operation of the crowd operation for Angular using the HTTP client in RSJS. Now, this is the scenario here. We're going to, we already fetch the data from a remote site from a database and we display that to a form. And then we're going to do two delete operations. One is we can delete a single record or delete all the records at once. And we'll send that off through the server. And we'll send that request over here to the server based on the API. And then we'll update the database to see if those data are deleted. So let's go and see how this is done. All right. So here is the site. We added the list here already. Last time we added one extra record here. We updated, we able to update this operation here as well. This time we're going to go and click the delete button here. It wants to click delete. It's going to delete this record here. Also show a message saying records been deleted. And also at the very bottom left, we have a delete all button as well to delete everything in the record here. Okay, so let's go and see how that's done. All right. This is the edit. We're done with this one here. We're going to go back to the flight list now because that's where the functions are, right? So this is the template. And the template here we have two buttons, actually a lot of buttons. One is for the delete. This is for delete one record at a time. And the loop here, we loop this entire record set. And then we need to create a function here. We'll bind to a function to delete one. And then this is the delete all function down here. Okay, button. So here I'm going to create a click event to bind that to a function called just delete. Maybe delete one, right? And we'll pass to this function the ID, which is in this case is this flight.id. So we need that ID to know which one to remove. Okay, and then down here we have another similar function. This time we'll do a click event that would bind to a delete all function. And this one takes no parameter. Okay, so let's go and create these two functions in the code here. I'm going to do right below here. So this is the delete one or 20. And then I have an ID of type number. And then now this one is going to load the service calling the delete one only. So this dot flight service that delete singular. And then we pass in the ID number. Again, subscribe, you have to subscribe if you don't want to work. And then even though nothing has been returned, you still have to subscribe to it. Okay, I mean, I don't know if it's returned now depends how on the server side. But if you want to get the data what's coming back here, you can subscribe to that in the faster data. But I do want to update a message up here. I want to update the count and also update the submitted to say true, right? So that means I need to put in here, you want to make sure that that really it did succeed before you put the message. Otherwise, you just put outside here, it could not be true. So in here, I have to do this error function. And then inside here, I'm just do this. It does not to be confusing two things. Yeah, I'll update this submitted to be true. And then I'm going to change this count to count is number type. And so when we load the data here, we already updated the count here. So in this case, once I delete one record, I'm not going to, you know, call this again, just basically call this low function. And this, this already will fetch the data back. And they also update the count. Okay, so that's what we need to do here. So this that low data. And that's it for this one. But yeah, but I want to see what's inside the data here so you can load that to the console and see what the data is. So I put here. So I know it's coming from the server. Okay, it might be the data that was deleted. Usually that's the case. Okay, so that is the delete one. And then we'll do one more down here for delete all. This is should be very easy. The delete all takes no parameter. And this one here will be this flight service that delete all or delete flights. And we need to subscribe. Same thing. I need to check the need to say this submitted is true. And also load this data if there's any. And in this case, we have the zero and the console log. What happened with this data? What is it? I'm curious to know, right? Okay. All right. Well, so again, just make sure you subscribe. You don't even work before I delete everything. I want to just do that first show you. And if I turn this off for now. And so just put that message saying, you know, this is true. We just fake that. Assuming everything is good. Okay, so that's gone and there's an error in our code weapon. I delete one. It's not defined. Oh, did I call differently? Oh, just to delete. Okay, let's call it delete one. There we go. All right, so let's go and check it out. Refresh our page. Okay, I'm going to delete the first one. Okay, as you can see, get the message saying it's deleted. But really, when it came back, the data is still here. Right. It didn't work. Even though it didn't work, the function go back is still there. Right. Delete number four. And so it's not working. And we can check that in the database over here. Refresh it. And you see that everything is still intact. Right. So it did not work because we did not subscribe. Now the delete all will work. We can do that. I think if I go down to the bottom, if I do delete all, you see that it's all gone. Okay, all data is normal data. And if I go and app flight and then show flight is no more. Okay. And if I can verify in the database as well, you see that it's all gone. Okay. So while we have no more data to deal with, I'm going to go and reset my database. And I have a function here actually to reset it. So here, if I call it as you can see empty, and I have a reset here function. Okay. So it's all done. The only thing is that once I reset it, then all these numbers are no longer the same. As you can see, it's updated to number 13, instead of the original one, two, three, four, five, because I did not truncate it. I just delete. So if you just delete, you retain the ID number. If you truncate, then that will be set to the original starting one again. So again, if I refresh it. So here we go. We have the new flight number ID now. This is an index, this is actual IDs in the database. So we know that this one works. So for sure, that's why you have to subscribe. Right. So here we go, turn this off and turn this back on again. And we should be good to go with one deletion. Okay. So let's go and then do one more time for our deletion here. Let's reload that module and I'm going to delete number 14 instead. So there you go. It's been deleted and 14 is gone. Okay. If I go back and just reload it, you see that it really did disappear. If I delete number 20, and there we go. So if I go back to the database and verify that, you see that 14 and 20 are gone. Okay. And as we do every deletion, it should decrement the number of count. I didn't show that here, but you can log in, you can see it. Oh, I wanted to see what's inside the data. And when it comes back, yeah, there is no, we delete a record. Yeah, nothing came back. So now if I keep deleting that, all of them, I'm going to get the count back to zero. And then you show a message here says no data. This is the flag. So now everything is all gone again, and we are good to go. So just make sure again that when you delete, you have to subscribe. Even though in this case, if you don't do any of these flags, you have to subscribe it and then reload the data again synchronously. Okay. If you don't load it here, and if you load it out here again, that's fine too because it's going to load it synchronously. But just make sure you do subscribe. And that's how you do delete operations. So let me know if you have any questions. Thank you.