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 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.ts

    app.module.ts:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 { }

    chevron_right

    
    

  • 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 lis here. The lis array will help us show the data. A user defined function is called when response comes to hide the loader.
    show-app.component.ts:-

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 {
        .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 lis[] is created 
    // using JSON element property

    chevron_right

    
    

  • 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:-

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>                    

    chevron_right

    
    

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.