AngularJS Fetch Data From API using HttpClient

There is some data in the API and our task here is to fetch data from that API using HTTP and display it. In this article, we will use a case where the API contains employee details which we will fetch. The API is a fake API in which data is stored in the form of a JSON (Key: Value) pair.

API stands for Application Programming Interface, which is a software intermediary that allows two applications to communicate with each other. Angular offers HttpClient to work on API and handle data easily. In this approach HttpClient along with subscribe() method will be used for fetching data. The following steps are to be followed to reach the goal of the problem.

• Step 1: Create the necessary component and application.
• Step 2: Do the necessary imports for HttpClient in the module.ts file.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
    ],
    imports: [
        HttpClientModule,
    ],
    providers: [],
    bootstrap: []
})

• Step 3: Do the necessary imports for HttpClient in the component.ts file.

import { HttpClient } from '@angular/common/http';

export class ShowApiComponent implements OnInit {
    constructor(private http: HttpClient) {
        ...
    }
}

• Step 4: We get Response from API by passing the API URL in get() method and then subscribing to the URL.  

this.http.get('API url').subscribe(parameter)

The Response of the API is stored in a variable from which data can be accessed.

• Step 5: Now data array needs to be shown using HTML. A Table is used in which rows are added dynamically by the size of the data array. For this, rows are created using *ngFor then data is shown from each row.

Prerequisite: Here you will need an API for getting data. A fake API can also be created and data can be stored.

Note: We can use any API link in place of (http://…com).

Example: Here, for example, we already have a fake API that contains employee data that we will fetch

Steps to Display the Data:

• Step 1: Required Angular App and Component(Here show-api component) is created
• Step 2: For using HttpClient for our app, HttpClientModule is imported to app.module.ts

app.module.ts:

Javascript

import { BrowserModule }
    from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule }
    from '@angular/common/http';
import { AppRoutingModule }
    from './app-routing.module';
import { AppComponent } from './app.component';
import { AddInputComponent }
    from './add-input/add-input.component';
import { ShowApiComponent }
    from './show-api/show-api.component';

@NgModule({
    declarations: [
        AppComponent,
        ShowApiComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• Step 3: In the Typescript file of the component(Here show-api.component.ts) import HttpClient. HttpClient helps to render and Fetch Data. The Employee Details API is used to get data. We get Response from API by passing the API url in get() method and then subscribing to the URL. The Response of the API is stored in a variable named li from which the data array is further stored in an array named list here. The list array will help us show the data. A user-defined function is called when the response comes to hide the loader. 

show-app.component.ts:

Javascript

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
    selector: 'app-show-api',
    templateUrl: './show-api.component.html',
    styleUrls: ['./show-api.component.css']
})
export class ShowApiComponent implements OnInit {
    li: any;
    lis = [];
    constructor(private http: HttpClient) {

    }
    ngOnInit(): void {
        this.http.get(
            'http://...com')
            .subscribe(Response =& gt; {

            // If response comes hideloader() function is called
            // to hide that loader
            if (Response) {
                hideloader();
            }
            console.log(Response)
            this.li = Response;
            this.lis = this.li.list;
        });
        function hideloader() {
            document.getElementById('loading').style.display = 'none';
        }
    }
}
// The url of api is passed to get() and then subscribed and
// stored the response to li element data array list[] is created
// using JSON element property

• Step 4: Now data array needs to be shown using HTML. A Table is used in which rows are added dynamically by the size of the data array. For this, rows are created using *ngFor then data is shown from each row. In this file, added a loader that loads till the response comes. 

show-app.component.html:

HTML

<h1>Registered Employees</h1>
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only" id="loading">
            Loading...
        </span>
    </div>
</div>

<table class="table" id='tab'>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Office</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let e of lis;">
            <td>{{ e.name }}</td>
            <td>{{ e.position }}</td>
            <td>{{ e.office }}</td>
            <td>{{ e.salary }}</td>
        </tr>
    </tbody>
</table>

Output: In the console, the data array of the response can also be seen which is further used to show data: