AngularJS | fetch data from API using HttpClient - GeeksforGeeks

22 Dec, 2021
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 JSON (Key: Value) pair.API: API stands for Application Programming Interface, which is a software intermediary that allows two applications to communicate to 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 problem. 
Step 1: Create the necessary component and application.
Step 2: Do the necessary imports for HttpClient in module.ts file.  
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
  ],
  imports: [
    HttpClientModule,
  ],
  providers: [],
  bootstrap: []
})
Step 3: Do the necessary imports for HttpClient in 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 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 need to be showed using HTML. A Table is used in which rows are added dynamically by the size of data array. For this, rows are created using *ngFor then data is showed 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 – “https://www.mocky.io/”.Example: Here for example, we already have a fake API which contains employee data which we will fetch API: “http://www.mocky.io/v2/5ea172973100002d001eeada”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.tsapp.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 Typescript file of 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 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 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 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://www.mocky.io/v2/5ea172973100002d001eeada')    .subscribe(Response => {       // 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 need to be shown using HTML. A Table is used in which rows are added dynamically by the size of data array. For this, rows are created using *ngFor then data is showed from each row. In this file I had added a loader which loads till 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 console, the data array of the response can also seen which is further used to show data.  
 
ruhelaa48
sweetyty
AngularJS-Misc
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to set the default value for an HTML <select> element ?
File uploading in React.js
How to set input type date in dd-mm-yyyy format using HTML ?
How to Open URL in New Tab using JavaScript ?
Types of CSS (Cascading Style Sheet)