How make HTTP Get Request in Angular using HttpClient service | API Integration

[Music] hello everyone and welcome back to front end pathsala in this tutorial we will learn how to make HTTP get request in angular using HTTP client service for this tutorial we will consume online fake rest API so without delaying let's get started I have created a folder over here let me just copy this path now open your command prompt type CD and paste the path over here next let's create a new application using NG new command so NG new HTTP hyphen service hyphen angular type yes select CSS once the application is created go to visual studio code and open the folder where we have created our application go to new terminal and type NG serve let's check in the browser so our application is running fine next go to app.module.ts file and add HTTP client module in it so import HTTP client module from angular common slash sdtp and add this HTTP client module inside import salary in the next step we will create a new service which will handle all HTTP client communication operations so for that will give the command NG generate service will keep inside the services folder so Services slash user now go to user.service.ts file and inject HTTP client in it so first import HTTP client from angular slash common slash HTTP then inject the HTTP client inside the Constructor using dependency injection private http then HTTP client this HTTP will serve as a variable go to browser and type Json placeholder we'll take this users and use this as our endpoint URL before that as HTTP client service uses observables for HTTP request so let's import observable from RX JX next let's create a method get users which will request the data from HTTP endpoint URL let me just copy this URL and paste it over here return this dot HTTP Dot so this example is get request so I'll choose gate next let's go to app.component.ts file and import our HTTP service that is user service in it next we need to inject reference of our service through dependency injection we will create a Constructor and in the Constructor we will do dependency injection create a variable and that variable will be of type user service now we need to implement one interface that is on init this is the predefined interface defined in angular code we need to import this one create a method NG on in it let's create an array variable named as users inside the NG on init method will subscribe to the get users method data addo function this dot users is equals to data now in the final step let's go to app.component.html file I just remove this code and type here H1 tag with the name title just run this application I'll go to TS file and give their variable page title with text angular HTTP client and I will call that in my HTML file using interpolation now let's quickly create a table we will display the users list with the help of ng4 and using the variable users user that ID user.name user dot email and for address we'll give user.address.ct and last user.phone we can see that the data is getting displayed from the API let's just change the look and feel of the table a little bit so for that we'll go to the CSS file and add some CSS so guys with this we have completed this tutorial please let me know your feedback in the comment section below and please don't forget to like share and subscribe to my channel see you in the next video bye

Channel: Frontend Paathshala

Views: 2,084

Keywords:

Id: wbevohBVlDQ

Length: 11min 40sec (700 seconds)

Published: Mon Aug 07 2023