API integration in angular with http - Angular 17 | How to fetch Data from API in Angular 17

hello everyone welcome to quickart Academy today in this video I'm going to tell you how we can integrate API in angular 17 project so integrating API in angular 17 is bit different than the previous version because here we have the concept of Standalone components as well okay so here in this video I will show you how to integrate the API so first um while using the HTTP for integrating API we need to import the HTTP client model so you can go to your specific component where you want to integrate your API and you will mention something called as hdp client module so HTTP client module and it will be imported like this HTTP client module at angular SL common SL HTTP and we will need one more thing to inject in Constructor so here I will make the Constructor and here I will mention private private HTTP HTTP client so this two things are done okay so now I will create uh one method public fetch details okay and here we will write the uh code related to the API integration and before starting uh that we can uh use our NG only method to call this phase details method so for that we need to add implements on in it okay and it will give you error so because once you implement on init you need to have NG on init method okay so here I have added and here I'm calling this newly created method okay so now we will uh move to the API integration part so here we need to mention this do HTTP and whatever the uh type of that method is uh whether it's a delete get put post that we need to mention so before integrating this we need to have the some actual Endo so we can go to the Internet we can uh type something as Json placeholder and here we will get the first recommendation we are going to click on that and here we will get one mock API so here I'm simply copy pasting this randomly uh and here I will mention this. http.get and this is my Endo so this thing RS the observ observable so we need to subscribe to this okay so we will say something as subscribe and then uh we will create one Aro function so here we will say response any and we will print the response as it is so console. log response okay now let's uh reload our browser and let's just see whether this is integrated or not so so here you can see I'm getting the details okay so here through Network tab also we can check our uh API call so here I will click on F xhr and I will reload this and here I'm getting the response as expected okay so let's just uh show this on our HTML as well so I will just say div I will assign the data so here I will create one variable as public data I will just mention any and then I will the response I will map this response like this dot data is equal to response and simply I will just mention like this with inter with this interpolation I will say so I will uh use any of the key like data. ID and just see okay it's getting printed so in this way I will copy paste and here I will mention the another key as well so what is that a title okay so I will just say title and now see these two are getting displayed on our screen so in this way we can integrate the API in our angular 17 project so be the hdp client module or htdp client so everything has to be done in our component.ts file only so we need to import HTTP client module in our import section and we need to inject the htdp client in our uh Constructor okay so thank you for watching this video I hope you like it make sure to subscribe to my channel thank you

Channel: Quick Code Academy

Views: 6,581

Keywords: api integration tutorial in angular 17, api integration angular 17, rest api angular, angular 17 http get api, http api call angular, how integrate api in angular, how to integrate backed services in 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, angular 17, angular 17 api integration, fetch angular 17

Id: OrN4sdIbC5g

Length: 5min 40sec (340 seconds)

Published: Tue Mar 05 2024