How to make Fetch Data From an API Using Angular
How to Angular Fetch Data from API Using HttpClientModule
Hello, viewer Welcome to m-softtech another new blogs. In this blog I will teach you how to fetch data form API Using HttpClientModule. so let’s starts our blog. whenever we get data from API in Angular. we need HttpClientModule to get data from API.
- Add HttpClientModule and import
- Create a service file
- Create an instance of HttpClient and Fetch the Data.
- Create a data interface to cast the observables
- Subscribe the data from the service in component
How To Make A Lazy Loading Module | Types Of Module
Here is my json data
{“id”:”0001″, “type”:”donut”, “name”:”Cake”, “image”:{ “url”:”images/0001.jpg”, “width”:200, “height”:200 }, “thumbnail”: {“url”:”images/thumbnails/0001.jpg”,”width”:32,”height”:32}}First step you need to add HttpClientModule and import it.
Angular Template Driven Form | make a template driven form in angular | angular forms
Here is example how to do it
App.module.ts file

when we import HttpClientModule. then second step is create service file. And create an instance of HttpClient for fetch the data. and after this create a function.
ng generate service servicename
Here is example how to create a function in service file and how to get API URL in this function return value.
Service.ts file

when these step are completed. then we create a object in app.component.ts file. this object is any type object. and then create an instance of service file. and get the service function value on ngOnInit inside and subscribe the function and get response in any type in above object. here is example how to do that.
App.component.ts file

And now we receive a data inside form new data. and then we need bind this data in html file. so here is example how to bind this data in html file. in help of interpolation data binding.
App.component.html File

If you have any problem to understand this article. so please you can watch this video tutorial also
How to Fetch Data From an API Using Angular – Making a GET Request