Fetch Data from an API using the HttpClient in Angular

In order to start using the HTTP client in Angular, the first step is to go to the app module and import the proper module. Starting from Angular version 4.3.1, the new HTTP client, which is called HTTP client module, lives in the @angular/common/http namespace. Before, it was simply in the HTTP package of Angular.

Make sure to import the HTTP client module, and then in the import section, to declare it accordingly. Also, you need to make sure that in the package JSON, you have imported the Angular common package, which is most often the case.

Next, we need to have some data which we can fetch and actually invoke. Normally, you have an endpoint or some backend API where you can fetch your data. In this setup here, I have used Angular CLI, and as its folder, I have created a data folder which contains a sample JSON structure of people names.

The CLI is nice, and shows us that API are the assess data people of JSON. As you can see, it returns as the JSON file. We can now start implementing our HTTP calls. As a rule of thumb, our components -- in this case, the app component -- should never contain the HTTP or logic. That should rather be delegated to some arbitrary service.

For our purpose, let's create here a people service, and let me paste in here some default implementation of such a people service. We need to go in our app module again and register that people service data in order that it works. Let's import people service here from our people service file, and reference here, and a provider section.

To now use our people service, especially to invoke the HTTP calls or API, the first step is to import the so-called HTTP client. The HTTP client lives as well in the @angular/common/http package. We can get it injected directly into the constructor of our people service here.

Once we have the instance of the HTTP client, we can, here, create a method in our people class -- let's call it fetchPeople -- and then directly refer to that new HTTP instance, which we get here in the constructor.

In order to issue a so-called GET request or endpoint, we can use directly the GetExtension method here on our HTTP instance -- which we got, so we are on our HTTP client -- and then use the URL, which we have seen before. The assets folder/data/people/notJSON.

Finally, we need to return our result here from the HTTP service, which will return an observable. For the sake of the simplicity, let's simply use here the object. We obviously need to import that observable here from the RxJS observable package.

Great. We are now set up. We can jump to our app component here, get our people service. We also want to get that here in constructor. Now, let's assume whenever a button is clicked on our UI, the fetchPeople function here is invoked, which, in turn, will use our new people service here and invoke the fetchPeople callback.

This returns an observable. What we can do here is directly create a variable -- let's call it people -- and associate our response to that people variable, which will then contain the observable. We can now switch to our app component HTML file and start rendering that list of people.

First of all, let's create our button, which will now invoke here our fetchPeople function. Once we click the button, we want to render here our list of people, which we can do by using a simple, and you follow, an AsyncPipe. Let's save this.

When we fetch the people, you can see they get displayed properly on our list here. If we open up the inspector tool of the Chrome dev tools, we can also see how the network request is being made to assess data people JSON.