Consume Web API method in Angular 13 | handling GET + POST + PUT + Delete | Angular 13 tutorial #14

hello everyone welcome to nigeria techies this is our angular 13 series part 13. in this part i am going to explain how to handle the http verbs in our angular applications especially when we are consuming the external apa how we can call the get method and how we can post the data to the services and how to use the put method and delete method i am going to explain everything in the detail and also this is the continuation of our last video in my last video i explained how to create the services and how to use in your application and i am giving just android about the get method so let me just go to the code so in the code if you see this is my master service the service is created using the injectable decorator and if you want consume any external api you have to use this http client so that's what i have injected here and also we need to import the http client model so i am added so these are the changes i already done if you see in the top of that imported and here also i am added so this is the initial thing after that here the http client also added i'm just implementing one get method online for getting all the data so just i want to show my ap also you see this is my apa basically it has get method and i get by code and delete and post method i have not returned any special method for the put so that also handled in the post method but i will explain within one small example so this is my employee table if you see it will return around four records and as i mentioned in the service part i created the method for returning all the records so then in the component i just injected the master services then i subscribe to the get employee data basically this method will return all the employees so currently i'm having values in this m list after that i'm just binded in one of the list and the output is like this so in this way we have to call the get method so now let me try to explain the post method okay if you see in the apa so it's expecting the input is in this object format so before that let me go to my service here i am going to create the method for post okay save employee so anyway i'm trying to return some output value so here also same this dot http this is our http client object and here the method type is first so the post method always expecting two inputs one is our in url and the next one is data ap1 and now i am trying to pass the data so that this method has one input and the input type is any let me pass it here so now we have completed our first method the similar way i am going to create for get by code get by core so this is for amgly so i am going to mention the employee get by code so my input is code instead of using this post method i'm going to use the get method and here i am going to pass the input is in the url let me pause it okay done so now i am going to write the method for delete remove employee so instead of get i'm trying to make it is delete okay now we have done our codings in our service part now we can verify all the methods are one by one as of now get method verified so that's what the data got loaded here and i am going to my component side here i am going to create one button basically we will get data's from the our farm and in order to we will complete the post method so the forms like uh template 31 form and what is called the reactive form i will explain in my separate video here i am going to pass the data in the static banner only so let me define the function here so outside the constructor here we need to pass some input so let me declare it input data so we all know this is the input format so code is fine john printer the name and the email is jb at in dot com and the mobile number is 998 and and destination is manager so now we have the input so let me call the service so this dot service dot our method is actually save employee here i am trying to pass the input so input data so subscription also required okay done and we want to see the output so let me include this result in the console.lag okay done and let me format it okay great showing some error unexpected closing tag okay fine if you see there are four records right now i am going to click this post data okay if you see the console so see basically we will use the click so on click in javascript now let me try to click this post data you see the result is key code is empty and result is passed look like the data got inserted let me refresh the screen so okay now one more new record is generated and the record name is john prita if you want to check we can verify from our service also so the fifth record is coming with all the details name email phone number and destination okay great our post method is working fine now i am going to explain our get method i mean get by code for that i am going to have one control input and the class is form control code so after that get by code here i am passing the code value so in the ts file i am trying to implement the function get m by code so the same name we supposed to use okay then here i am trying to consume the service imply by code here the input is code passed and the subscription is very important one okay we subscribed but we need to declare one object so m object so this dot m objective culture so whatever result is coming we can assign it here and in the html part we won't see the records so that i'm going to have one span so in the span tag i am going to write like name actually our object is employee object and name so now we can verify you see here look like data's are not loaded it's some error so for the get method i am trying to give the ids true if i am clicking this so i am getting the values name ruben so if i am giving 5 so value is foreign the same way we can update all the details as of now i mentioned name the same way we can get the email and the phone okay now trying to q5 so get the email and phone numbers so every details are coming the data learning we can manage so whenever we are loading the initial time actually datas are not loaded because if you see the console so the name is not readable so actually i am trying to bind this uh name so initially the m object i just declared there is no data that's what its error is coming if you are giving some kind of conditions it will resolve the issue and before that let me move on i'm going to explain this the next delete method so far delete method also i'm trying to use the same one instead of this get by code method i am trying to call this delete method so here i am going to call this remove employee but other things are same okay fine and let me try to change the text also so here i am trying to pass the values three where remote any refreshing see the record got removed and if i'm trying to remove the fifth one okay let me check in the console because we will know i think so the console be not added let me include this in the console okay great so let me give five so the key code is zero and result is passed that means removed so if i'm trying to refresh the screen so the fifth record also got removed so in this way we can call the get post and delete method the same way if you are using the put method so actually i handled the push method in my post method itself but if you are having the separate put method you just change the verb instead of delete go to cube put and you need to pass the values sundown so we have one key values so you have to pass it here so based on that that means based on the key value you are updating the uh particular entry that is the concept here so this is our end of the video still if you have any doubts or clarifications please post in my comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 12,369

Keywords: Angular 13, nihira techiees, services in angular, how to consume services in angular, How to consume external service in angular, How to use POST GET PUT DELETE method in angular, how to use post method in angular, how to load data in list, how to consume .NET core api in angular, How to consume web api in angular 13, how to consume .NET CORE Web API in angular, how to handle delete method

Id: JC3R3mMo7Xc

Length: 14min 34sec (874 seconds)

Published: Sat Feb 26 2022