#9. Create Reactive Form and Update data using API | Angular update data using POST API | Angular 12

hi friends welcome back to angular code application tutorial series so it is my eighth video so we have created the json server and set up this application and we already done the list page and add page and already did the add operation okay so last you have discussed also the delete operation also so one thing is left to complete the full code operation so we need to edit these things right so we will create a link here this is the edited link and by clicking on this a link will get a from just like this and that form will be the field with the data okay so let's see how we can do this so first of all we need to create this edit link so here is my web directory just go to the source app inside the app we have created the components and all the components you already created okay so just go to the list component dot html file and here we can we have created the delete button and same like we will create the edit button also okay so for edit button we need a anchor tag so just write a and we don't need hd actually we need the router link right and we'll create a link that is edit so currently if we just click on this editing we are getting the edit actually we don't need this edit because when we go into the list and click on the edit so it will go to the particular student details so we need the id also so i don't need this actually this edit link so we'll pass the id along with this here just write the router link that is edit slash the item id actually we are getting the id inside here right so this is the link and here i will just use the edit right so anchor tag is edit now if you just go inside the listing page so we can see delete and edit so it's not look good i want to use the font awesome so just go here font awesome cdn and just search for suppose i am using this link so this is the link so i need to use this so just go inside the index.html so this is the main file so just paste this here right so before the hectare close right and we can use the font awesome class so i know how to use this and simply here write i and we'll use the specific class okay so the class is suppose f a f a trace so trash for delete icon so just use this and just copy these things also so the functionality will still exist and same way just copy these things and paste it here and we don't need this click option and the icon will be the edit right and we will not need this okay so now just go here you can see two icons okay so this looks nice but we need some space here so simply just to and nbsp right so it looks good now now we can continue our edit application so just click on the edit so if we just click on the edit it is basically showing the error that is the router link here right so actually we don't have this type of links so for this we need to go to the router page so just go to the router page so here is the app routing module.ts and here we have a created edit so we need to just pass the id here right so how we can pass this so just simply write slash id okay so so now refresh this we can see the link but the link is still not valid so actually we do we need to write the slash here right so if we just click here so we can go to the edit student works right that means the edit student component is working so if you just go to the edit student component.html we can see these are coming right now the thing is we need to create a from like this and just copy this from the previous so already we have discussed how to create a froms so if you don't see the previous video so actually this is the video series so if you don't see this i recommend you please see this first right so it will be more clear to you so just copy that component ts also and here we'll just copy this section so we need the from control from group and also the service so just go to the edit student component and just import these things too so these things are imported now some things more we need to import so just copy this section so private student student service so we are calling this and we also need this full section right so just go here and paste this right so all are done so let's see how it's appearing so if we just go to the list page and from there we'll just go to the edit page so the simple from is coming okay so right now we don't need this link so i am just going to remove this so further it will not create any confusion so just go to the app component html and just removing this link from the component file so just go here and we cannot see this right and the thing is we don't need this actually copied all the things and this is the index.html also removing these things and route is set and we don't need the list component also right so we need it is to encompa typescript file and the html file okay so all are set now we will do the changes right so here just first write update student and success message student updated and here is the remove message and if you just go here we can see that message no problem on that and here the from group suppose are changing the name of the from group so it is student so just right here the edit student okay and save data so i'm just going to update data so actually when we will click on this submit button basically this form will call so just write here update data right so already now we need to fit the specific record suppose just go to the list and i'm just going to edit the student one so we need this student one here okay so basically we need this parameter that is the route parameter which are getting and by using this parameter we will fetch the record okay so for this we need to import the routers so just go here and import the router modules so just right here and at the rate angular routes right angler slash router right and we will import here simply activated route okay so it's appearing and now we need to use this inside here so just add the comma and create another that is private suppose i am taking the name as router and it will be the activated route okay so using this activated route will get the value of this url right so just go to ng on init so here just console which i am getting from the route so i'm just going to console this so this dot the router dot the snapshot dot params that is parameters dot the id so basically id is coming from here right so if you write here the id we need to use this inside here right so from there it's coming okay so now if we just go here and just refresh this so we are getting the id one and if we just go again and and trying to edit this so just click on this and it's getting five that means we are getting this record okay so now the next step the next step is what so we need to call a api and through the api we will fetch the record of the particular student right so how we can do this so you already have included the service so we'll call this service so just go to the service student service dot ts right and here we'll create a function that is get student by id okay so here we'll take the id so just write here id and we'll and we'll fetch the particular record from the apis so just write written this dot url sorry http and we'll get the record so right here you get okay and we'll pass this id how we can pass this so just use the still sign and dollar just like the above which we have done for the delete and then slash and then we'll pass the id so id right so all are done so what is the error here so the property student service or http client right and here i am specifying that is any okay so we can get the any value so we can specify the number also because the student id always be the number right and now we need to call these functions from the student component dot ts file right so here we'll just call this so just write this dot the student so right here student and the function name gate student by id and we'll pass the id here so we know we are getting the id from here so just pass this right and then subscribe right and let's check what appearing so just here we'll create a closer function so write so write result and here we'll create this and we'll print console dot the result okay so let's check what is appearing through the api right so i am closing this console so now if we just go to the browser so just close this and refresh this so we are getting the records from here that is david so david gmail.com so this is for five and if you just go again and click on the eight and i think i will get the value of john cena right so we are getting john cena so we need to populate this value here okay so how we can populate this so just we are getting all our result now we can use this edit student from group again here and we'll use this so right here this right this dot it is 20 now we will pass this from here right so we are getting all the value inside the result so simply write result and the name right in the similar way we'll pass the email also so the next thing is email right so we'll use the email okay so what is the error so the property name does not exist on type object okay so we need to type skip this so we are getting the value the result so i am specifying this type any right so all are done now if we just go to the browser so we are getting the value that is john cena and go back to listing and suppose gold work so right here we are getting the gold work get the value of harry potter also okay so we are populating all the value which you need to update right so next things when you click on the submit we need to save this also so if we just go to the edit so if we just go to the edistrian company.html i only created a any submit function so when you just copied we have created these things so actually when you click on the submit it will call this function that is the update data function and we have the already updated data function okay so let's create the functions so here if you just go to here suppose i'm going to access all the add stream from inside this so all the value we need so this is the value name and email and all the value we need inside this update data so how we can get this so write simple console.log let's check how it's appearing so just write this and we are using active form so this dot edit student dot pen right so now if we just go the browser and refresh this so we are getting the value so just remove all the logs and suppose harry potter one okay so i'm just going to edit these things right so click on submit so we are getting the from value inside the updater functions right so we are getting the value so we have no problem so we'll just pass this value to the service and from the service we'll call the api and we'll update these things right so how we can do this very simple no problem on that so simply we'll create a another service function suppose i'm going to service and create another function suppose update student data right so what the things we need so we need basically two things so we need the id where i want to update so first write id and the next things all the data we are getting from the from right so i am using the data right and simply will call api so just like this so i am copying from this so here we will use the put method right and we will pass this url id and will pass the another things that is the data right and what is the error so this same type of error so just id will be the number and the data may have any kind of data right so okay so updates when data is completed now just go to the typescript file so here we need to call this update student data from the service right so how we can call this so we know how to call this so we have done lots of things like this in this series right so use this dot student dot the function name update student data and will pass the value so this it is student dot value and the another thing so first parameter we are getting the id and second parameter value so we are passing the value but how to pass the id so we already passed this id from the this router snapshot params.id so just copy here right so two parameters we have passed now we need to subscribe so right here subscribe okay so right here the closer function so write result and here we'll create this and we'll just simply console the result which are getting so every time we need to console these things so this is the good practice so when we will get the error so let's fix this and proceed right so we are getting all the value that is result okay so i'm just removing the first console so we don't need this so we are getting the value from the service so all are set and just go to service okay so we are passing the id and data right so now just go to the browser and suppose here go to the list suppose i want to edit these things student one so here right suppose any num that is john's mark right and here right john's so and to use the small case john's at the red email dot com okay so now just save this so we are getting the john's mark right so it's coming after the api call right so if we just go into the server we can see the student one will be changed so john's mark and if we just go to the list also so these are also updated school right so in this way we can update this but we need another thing so when we just adding this section so after submit it's showing the success message so why not in the update section so we already make that functions so here just go to the edit stream company.html here we have a ng if condition that is if the message is true then it will show right success student updated so just use these things so after updated we will just use this dot message equal to true right so just go to the browser again and just go to the list again and student two suppose i am going to add in random numbers that is student one two three four and uh email id student one two three four at the red email.com and let's submit okay so we are getting the student updated and we have also cross button so when you click on this cross button we are getting this remove message functions and we already add these the remove message function so all we have done in the add section right so so when we just created this app student section we have done all those things so if you don't see the previous video i recommend you please see the full video series and i will provide the link inside the description section and also i will update this into the github so you can download and that links also will provide in the playlist description section okay so if we now just click on this cross button so message is gone right so all our things maximum is done that is we are getting the list we did the add page now edit and delete so next things we will going to register students so here actually we have adding the students like these things so next day we will going to register suppose teacher right so that will be the interesting thing so we will create a registration process in the next video please comment if you have any queries about this video and like and subscribe this channel for upcoming video thanks for watching this video have a good day bye

Channel: Learning Points

Views: 26,558

Keywords: edit reactive form, angular reactive form, how to get url parameter in angular, angular edit page, angular crud example, angular 12 crud operation, student management project, angular tutorial for beginner, reactive form, json server, angular api, how to call api, how to get api data in angular, how to list api data in angular, angular project tutorial, angular crud project

Id: y6m14CmQmF8

Length: 21min 52sec (1312 seconds)

Published: Thu Jul 22 2021