Angular CRUD - 4: How to confirm & delete data using API in Angular | delete data w/ api in Angular

hey guys welcome back so guys we are continuing our angular Cloud application using API okay so now guys in this video we are going to learn how to delete the data from the database using a laravel API in angular so now guys let's get started so first let's move to this table view at this delete button let's move here so guys this is my student page component of HTML where I am at the student table where this is my delete button done so now guys at this button I'm going to add a click event so open and close function and just add a click and then you create a function like delete student function with this student I just want to pass the event and the ID dollar event comma and the student ID let me bring down so it will be clear so here is my click function okay and now guys copy this and go to the component TS file and you can create a simple function there use that same student function I mean delete student function you get the event first and then the student ID in this event we don't know what we are getting so just add any and here it's a number so I will add a number okay student ID obviously we are getting the ID integer data and now guys let us use the if condition for the confirm and delete the data so just use confirm function and add a message are you sure you want to delete this data so I just wanted one feature here like if I click on this delete button it's to tell that it's deleting and once deleted it should disappear so for that I just use this event dot Target Dot inner text equal to I'll tell delete thing okay done let's see the output of this refresh click on delete are you sure okay here you see it's deleting okay now you can get back again now guys let us write the code for delete the student so first I am going to my service there we will create a function like destroy student destroy student function where I get the ID student ID and I get in a number format now return this dot HTTP client dot I am using delete method to delete the record okay so I'll just confirm that in my laravel API application so here is my API for deleting the record okay let me copy this use TLD symbol and paste it and now let's copy the complete URL here you paste API forward slash student and then inside this curly brace before that add a dollar symbol so it will be editable format and now you copy the student ID and pass Here and Now let us copy this function and get back to the student page component add delete student function so now this Dot this is my student service so I have already imported the student service let me just show you that so here in the Constructor I have imported that student service okay so we'll copy this student dot service dot destroy student function what I have created so in that only we are passing the ID let's copy this ID and send in this function so it will tell yes I am sending the ID and what response you get you can get in the Subscribe function um response colon any is a arrow function we are going to refresh it okay so how are you refreshing the page we are using this function to refresh that data I mean call the data on the page load so use the same function here to reload the data so this function is nothing but the above function only it is calling okay so not to worry and now guys once data is refreshed you can alert the response message so here you get this response Dot message so what is that message and let me confirm here let's go to the destroy code once deleted here you see that message is there so you take this message response and paste here now guys let us try to delete the record yeah so let me add one dummy record so dummy dummy codes dummy at gmail.com some random digit phone number let's click on Save student created successfully okay let's go back and here is my dummy record let's click on delete guys are you sure let me cancel first okay let's click again and let's tell okay so you are deleting student deleted successfully okay and your data is refreshed perfect guys so as we have successfully completed how to delete the record using API in angular so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 4,912

Keywords: fundaofwebit, how to delete data using api in angular 16, delete data using api in angular, angular delete data using delete method, delete data in angular, delete method in angular, how to call delete api in angular, how to delete with api in angular, angular crud operation, angular 16 tutorial, angular tutorial for beginners, angular crud operation with laravel api, angular crud with api, rest api in angular crud

Id: jlMzcKPnCbs

Length: 6min 5sec (365 seconds)

Published: Sun Jun 04 2023