How to make Fetch Data From an API Using Angular

June 18, 2022June 18, 2022 M-SoftTech 0 Comments

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