API integration in angular with http

hello everyone welcome to Quick code academy today in this video I'm going to show you how we can integrate apis within angular so without wasting any time let's start with the video so first of all while integrating HTTP calls what you have to do you will have to go to your app.module.ts over there you will have to import one module as HTTP client module and that should be added in your import section and here you can find that module at angular common slash HTTP so now you can go to any component where you want to add your HTTP call so for that you will need first Constructor so by default Constructor is available in the boilerplate but if it is not there you will need to add that and then you can inject HTTP client so if you are you can mention this as http and then here you can add HTTP client okay so now first of all I will create two variables first I can create get Json value and that I can keep as any as of now and then we can create one more variable as post Json value and here also we can mention it as any okay so for integrating any APA first you will need HTTP endpoint the API endpoint so as of now I don't have any apis so I will look for some placeholder API so for that you can go to Google and type Json placeholder so over there on that side you can find apis for get post or any method you want so here I am clicking on guide section so here they have mentioned like what are the endpoint so first we will take this end point and we will try to integrate in angular so how we can do that so first I will create one method uh say public get method okay you can give any name you want and within that I will start integrating the API so first of all what you will have to do we will have to click so type this dot HTTP dot get since it's a get method and here within that you need to copy paste that API endpoint or any endpoint you have so as soon as I do this let's check on browser what is happening are we getting any calls so let's inspect it and go to the network section or here I'm not able to see any call so why is that so whenever you are any calling any API so you need to subscribe that as well so how to do that here you can mention dot subscribe so as of now I will just type dot subscribe and here we go so now let's close this and now let's refresh this again so are we able to see any call no why because we need to call that a method in NGO units so we missed that so here we can call this method this dot get method and I will showcase you see now the API call is getting triggered and we are getting the data as well but uh when the Subscribe is absent you will not able to find that APA call okay so make sure you add dot subscribe okay so now how we can check the data in console so for that what you will have to do you can create one Arrow function like this where you can capture the data within that you can type console.log and you're here you can mention data so now let's see it all console whether we are getting it or not so here you can see that data but why to check that over here you can check that on the HTML itself so for that we have store this data into that get Json value the variable which we created here we can add that add on the HTML page we can create one here we will give heading as get method and then here we can add P tag you can add any tag which you want here we can use interpolation and then we already have that get Json value we can copy paste that name from here and now so if I try to print it like this way let's see what happens will it print no it will show object object why because it is object right so how to show that we can add one pipe as Json and automatically it will show on the HTML here we can see so now we have seen how to add get method so now we will check for the Post method as well so for post method as you have idea now for the get method so what will be required for the Post method so here we will create one more foreign post method and then here I will simply just copy paste this one now okay so here I need to remove this and here we can add post so now see it's throwing one error because whenever we are adding post method it will require some additional inputs as well so here we have just mentioned the uh dot post method and the end point but we will require body as well so here you can pass body like this one okay now the error has gone and let's print that one as well so here I will mention get position value and then I will go back to the HTML and here I can mention post and here instead of get it should be post so first let's see whether we are getting anything or not so as you can see we are getting nothing over here why because post method will require some body as well and that is different for each and every API so here we will see in the this documentation for post API like what body they require so here you can see this body so we will copy paste this one and now I will go back to my code and see over here we missed that again so here we need to call that post method and let's again see I guess we will get uh plain objects simple object we are getting okay but I will show you how we can pass that body which we have just copied so here I will mention body and I can simply just copy paste this body part so here we are dealing with the mock APS as such so here I can pass the body okay so now let's see see the body which we are passing it's getting added over here okay so now let's try to change this one so here instead of Foo we can add quick and let's see whether it is reflecting on the browser or not so here it is getting reflected okay and now you will wonder you have shown us like how to integrate EPS with the body but how to pass the parameters so for that you can create one variable as headers and you can type new http the header and within that you can pass the content type so I am just passing the common header which we have for all the aps which is application slash Json I don't know whether I'm typing it correctly or not but this is the way you should pass so here you will have now one additional parameters within that you will have you need to add headers and assign it to assign this value header now let's see on the browser so you will not get anything as such but you can check it in console in the network tab so I am going to refresh this one and here we can see this post method where we are passing the data like this one preview it and the header sections so there will be our C so the default content type is getting passed as well as the content type which we have passed right so that is also getting added so here we can see the discount default content time is different which is content hyphen type so here we have done it like this one okay foreign so this is how you can integrate get and post methods and with this you can integrate any kind of HTTP method you want so the basic concept Remains the Same for all other methods as well whether it's be delete put or anything thank you all for Patiently watching this video make sure to subscribe and if you have any queries write down in the comment box thank you all

Channel: Quick Code Academy

Views: 61,472

Keywords: api integration tutorial in angular, api integration angular, angular 13, angular 14, rest api angular, angular http get api, angular http post api, http api call angular, how integrate api in angular, how to integrate backed services in angular, http post angular, HttpClientModule, HttpClient, Cannot find name 'HttpClient', httpclientmodule import, service call angular, backend api call angular, how to subscribe to service angular, http get not working in angular

Id: 1IPDlV4Y5zA

Length: 11min 19sec (679 seconds)

Published: Sun Oct 02 2022