Scribd
Upload
2 views5 pages

AngularJS Fetch Data From API Using HttpClient

This document outlines the steps to fetch and display employee data from a fake API using Angular's HttpClient. It details the necessary imports, component setup, and the process of subscribing to the API response to dynamically populate an HTML table with employee details. Additionally, it includes instructions for implementing a loading indicator while the data is being fetched.

Uploaded by

solutionarchitect.jatinder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

AngularJS Fetch Data From API Using HttpClient

This document outlines the steps to fetch and display employee data from a fake API using Angular's HttpClient. It details the necessary imports, component setup, and the process of subscribing to the API response to dynamically populate an HTML table with employee details. Additionally, it includes instructions for implementing a loading indicator while the data is being fetched.

Uploaded by

solutionarchitect.jatinder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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>

You might also like