Angular CRUD - 3: Edit and update data using api in Angluar CLI | Update data with api in angular

hey guys welcome back so guys we are continuing our angular thread application so now guys in this video we are going to edit and update the data okay so basically we as we have this create form same way we are going to for the edit form and update the data from that form and then get back to this page okay so now guys let's get started so first let's move to this edit button yep let's move back to our angular application and here is my student page component where we have listed all the data done so here is my edit button and now guys add this router link I just want to add a route with the name students forward slash the ID and then again edit so here your ID will be coming so let us just open and close double curly brace and just pass this item dot ID so now guys let's create this route so let's copy this and get back to our routing dot module.ts which is app routing and yep guys so let me paste here copy and paste so let's edit here and let me remove it so here we change the path forward slash and then colon ID okay it's your student edit and now we need to create a student edit page let's open one new terminal here and just type the command NG generate component and the page name so I am following one structure here guys so it's inside the pages folder and going to create student edit hit enter okay so all the component is created guys for student edit and now guys let's import that component so student edit component and it has imported the class here we move and now guys you can go back to that student edit HTML page and now guys let's open and close div in a H3 tag tell that edit student let's save and now you can route and see the pages opening or not so let's click on edit and here you see perfect on the edit student page with the correct URL done guys and now guys let us copy the create form and paste inside our edit form a simple let's go to student create student create component.html let's copy everything and paste in our student edit component.html let's paste it that's it guys so now what we have to do let's change the heading edit and here back button it's going to be the same and all this variable also we have to add in our component.ps file and now guys one thing you have to change here instead of save student let's make it to update student so it's going to be the same input Fields same error Fields all the save button now let's rename this and save to update okay so save it and now guys you can just get back to the student create component.ts file and let's copy the variables whatever we have there so now guys let us just copy these three variables and let's get back to our edit component.ts file and paste it done so now guys I just want to create one a variable called student so student not colon any so now let us copy this variable and just paste inside your form okay student editcomponent.html and there we are calling directly name here right so we'll be calling student dot name okay so we are going to create in this format so let us just update that student.name student dot course email and student.4 that's it guys and now guys you can get back again to your component so now here we start with the fetching of data so first step what we are going to do on the page load we need to get the ID of this URL okay so from this ID will be getting it let's get back so guys NG on init function this Dot student ID okay we don't have a variable let's create that student ID variable here D naught colon any or just add number also it's fine so I'm going to add a number because I know that I am getting the ID so now you use this here equal to then your router so for that you just need to use this active router use a Constructor function open and close curly brush inside this function is a private route colon your activate route okay activated route so if you just press Tab and here the class Imports okay so it's imported and now guys with this help of a route we are going to get the ID so this dot route dot your snapshot dot param map dot get function from that get function I mentioned its ID so make sure it is you are giving ID only y because you are passing it here as ID okay so here we are facing error like type string null but assignable two number let's make it to any okay so there will be no warnings now guys let us console log or just alert it let's alert the student ID save and now if you refresh okay here the edit is oops it's showing for this function let's create it so it's not an issue let's get back to our student edit form on the form tag here we have a update student function let's get back and just add that function open and close calibrace let's save it and now that has gone perfect okay so now let's go back let's click edit on id2 so here you get in the Alert 2 okay and then you get the form awesome guys so now you can get back so we have got the ID and now with this help of ID what we'll do we'll get the single record of the student so for that guys we are going to use the student service if you don't know what is services in angular please watch out the video that is how to insert data into database in that I have explained how services are used okay so now I am going to use this service here so let's get back to student service and let's create one function get student so it's just single record I'll create student only and now let's return this dot call the HTTP client that is your HTTP request and use the get method and inside this get method you paste your API okay so my API for getting the student record is let me show you here is the edit option copy this and get back to our angular and paste the URL so my complete URL is this so yep pasted and here we need to pass the ID add a dollar symbol and send the ID so let me mention that is student ID and here you get from this variable student ID and here just pass any so any data you might be getting or if you know it is a number then mention it's a number guys okay and now guys let's get back to the student edit component.ts file so I reach there so now on this function on the page loads I want to call that student service from that student service we call get student function so now you need to add here in the Constructor private student service colon student service okay just Imports its path correctly it is already imported so here we move there and you see that we are already on the same path perfect so now guys let us copy this function and get back to our edit student so here you use this Dot student service dot your get student function and inside the sketch student function we need to pass the ID okay so we are sending the ID we are getting the API response and from there what you have to subscribe so when you subscribe here you get the response colon and open and close calibration where you mentioned console DOT log the response and you need to pass inside the student variable also so what you are getting first we need to check that so let's get back and just open your console developer tool refresh so we are getting errors guys that is about the input errors okay so it's not able to read that name but we have got the response here whatever we did the canceled log so here you see in the response we get the student variable inside that student we have some records okay some input field data so these data only we are going to append in that student variable so what we'll do we'll get back call the student variable this dot student equal to response dot student okay so when you get the response you append that student okay so this is a student and now so guys we are facing error so it's telling that I don't find any value so before that only it's throwing the error so what we can do there are two ways you can either use any here and sort the issue in the function and now the error has gone and you might be facing no errors refresh okay you have got all the input Fields okay so guys here if you see we are still facing this error but the data has come so before it gives the data it is already compiled that I cannot find this detail so there are two solution guys for this either you give it all the details like use curly brace here equal to and tell that name equal to null in this format or else what we can do we can just take this variable and get back to the edit HTML and here in the complete div let me open and close just add NG if condition if this student is loaded okay if has any data that time you show all these input Fields okay let me push this and here you end it that's it guys as simple save it and now you might be getting no errors refresh awesome okay so now guys we have got the data so here you see and here it is appended now let's get back so what we were working on here so there are this is one way and now guys what in case if you don't want to give in this method and you want to get the data so you have to create a interface so that it doesn't give warning so you can just get back to the student service and move on top export interface my student edit response okay response open and close so first will be what it was like okay so here you see that is status and the student so there are two response one is status colon it's going to be a number either you make its moral or Capital no worries add comma and then student colon and what data you are getting so in that we are getting all these details so already so we have already added this list here so I have already created that in the first video of insert data if you don't want also you can just add a like object I am getting okay object that's it so you can mention in this format also but I just want to get this here and paste it that's it save it and please don't add array here because we are getting only single data okay so now you can copy this and get below and insert this get student before this get function open and close angle and paste that that's it guys so here we call this interface and now you'll be able to fetch the details of student okay without any changes here awesome so let's save and now guys you can just get back refresh all works fine okay so now guys just let us just add the loading part also when the page is loaded I just want to this dot is loading equal to true so here is the is loading variable true once the data is loaded make it to false false nav save it get back refresh so here you see how it loads awesome guys so now guys let us begin with updating the data as simple let's move on the HTML so here you see on the form submit and the button type should be submit so when you update this it goes on this NG submit and gets to the update function so let's move to the coding and here is your update function so when we click on update function we need to get all the input Fields so for that let's create one input data variable equal to open and close curly brace where we mention all the requests what should be sent on the API request okay so that is name and this Dot student dot name okay so I'm getting from the student variable this dot student dot namestudent.course whatever you've sent let me explain you more here this is the variable so I'm going to copy that and paste here okay so no confusion and then guys you are going to for the course and my request in that course email this is the input and finally phone and this is my phone okay and now guys let's type the HTTP request for updating the data this dot I am going to use student service where is my student service let me copy this test dot student service Dot update student then use subscribe function then you'll be getting the response so before that I just send this all the requests use comma and the student ID also we need to send so for that where is the student ID here it is we have stored it let's copy that and send the student ID also awesome so now guys let us first create this function in the student service let's copy this get back to the student service so here we move below paste the student function name open and close first we get the input data getting that as an object comma and I am getting an ID also that is student ID which is in the form of number number all set and now guys write the HTTP client request that is I am going to use a put method because I have created API using put method let me show you that so in my level application I am using put to update the record okay so let's copy this API get back and paste here inside the build symbol let me paste the complete URL okay paste here and now guys here we need to send the ID so this is my student ID let me copy it and send the ID and after this add a comma and send the input request as simple guys it is very clear okay let me Zoom it more so you can see clearly okay let's get back save it and now guys you can use this update function move back to your edit component.ts file so now Guys open and close curly brace in the Subscribe function and then use the next colon open and close bracket of Arrow function so this is for the success response so here you get response of any response you might get and you pass that let me console.log first so we log that so once updated I just want to alert the message response Dot message okay so on the API I have given the message let me confirm it let me go to this update function so once the data is updated so we get a variable message awesome so let's paste here okay so messages like updated and this Dot is loading equal to false so when it's successfully done we need to make it to false okay loading part we have not set to active let me make it to true so once we click on update the loader starts and then once the updated loading Falls and then guys add a error colon Open Bracket arrow and function so here you get the error and this error only you are going to this dot errors equal to error Dot error dot errors okay and you can mix this to loading false on the error also and coming in any format okay so it will not give any warnings so now guys let me console log and show you this errors and you move back refresh let's remove this one email click on update you will get that 422 which is input error okay this email field is required you see here and you have got the response in the array format so here you see guys error is the main key main key inside that you find that errors so I am taking this error and errors and pasting it error and errors okay we are storing in this errors variable and here is the error variable and this error variable I am using in the edit form at this place to show the error whatever we get for that input field so now guys done and now let's try to update the record so let's refresh and instead of with prakash let's make it to Ved only and yep let me make it to Capital let's click on update so let's see student updated successfully okay and done Let me refresh you get that with only and here Capital awesome guys so we have successfully learned how to update the data in our angularjs card application using larval API so now guys in this video that's it let's continue in next video about how to delete the record using API from the database in angular so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 11,604

Keywords: fundaofwebit, how to edit update data using api in angular, edit update data in angular 16, angular crud operation edit update, how to edit data in angular, how to edit form data in angular, update api data in angular, angular update form data, angular crud operation, crud operation in angular, angular tutorial crud

Id: kYAA74X36tk

Length: 21min 44sec (1304 seconds)

Published: Sat Jun 03 2023