#16 How to Fetch Data from API using HttpClient in Angular | Get Data from API and Display

hi hello friends my name is jagdish uh today in this angular video we learn how we can get our page data from the json server this is our json server dummy data and i want to access this data in our application open code editor and create one component ng g for generate c for component and name of component user master press enter component created successfully copy this selector app user master and paste in our parent component f dot component.html for displaying created component okay after that open app.module.ts file and import something from angular common slash http http client module after that open user master dot component dot ts file and here in constructor create one object for http client service write in constructor private http client http client after that here create one function get user list this dot name of object is http client and dot use here get meter for fetching data from json server and here link of json server data copy this link and paste in get method after that for catching this data from this url we use subscribe meter one variable result for storing data from this url i am right here result my result is any type arrow function and i'm right here another variable user list for storing data from this result and user list is any type in constructor initialize this user list this dot user list this is created variable user list equals to a result and here name of function is get user list save this open user master dot component dot html file and create here table for displaying data th first is i'm right here serial number first heading after that name after that username after that email after that i'm right phone and website phone and website and another row in i am right here ng for late variable name user of user list and for index let i equals to index here interpolation for serial number s i plus 1 close this td tag after that for this name user this variable name user dot name after that for this username user dot name after that user dot for email user dot email after that for phone user dot phone after that last one is website user dot website close this tr tag and close table tag save this and compile application it takes some time stdp reference known okay in user master.com.ts file import here http client chrome angular slash common slash http okay compile successfully and open browser okay what happened simply again compile this application and open browser okay see in this way we can paste data from the json server by using http client module thanks for watching

Channel: Jagdish Tech School

Views: 13,401

Keywords: angular httpclient, angular, how to fetch data from api in angular, angular fetch data from api, httpclient, httpclientmodule, angular http, angular tutorial, angular get data from api and display, update data with HTTP put request, how to fetch data from an API using HTTP, read JSON data from API using http

Id: 1ZsgKMCB0bg

Length: 13min 19sec (799 seconds)

Published: Wed May 04 2022