AngularJS | obtener datos de la API usando HttpClient

Hay algunos datos en la API y nuestra tarea aquí es obtener datos de esa API usando HTTP y mostrarlos. En este artículo, usaremos un caso en el que la API contiene detalles de empleados que buscaremos. La API es una API falsa en la que los datos se almacenan en forma de par JSON (clave: valor).
API : API significa Interfaz de programación de aplicaciones , que es un intermediario de software que permite que dos aplicaciones se comuniquen entre sí. 
Angular ofrece HttpClient para trabajar en API y manejar datos fácilmente. En este enfoque , se usará HttpClient junto con el método subscribe() para obtener datos. Se deben seguir los siguientes pasos para alcanzar la meta del problema.
 

• Paso 1: Cree el componente y la aplicación necesarios.
• Paso 2: Realice las importaciones necesarias para HttpClient en el archivo module.ts . 
   

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

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

• Paso 3: Realice las importaciones necesarias para HttpClient en el archivo  component.ts .
   

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

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

   } 
  }

• Paso 4: Obtenemos la respuesta de la API pasando la URL de la API en el método get() y luego suscribiéndonos a la URL. 
   

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

• La Respuesta de la API se almacena en una variable desde la que se puede acceder a los datos.
• Paso 5: Ahora la array de datos debe mostrarse usando HTML. Se utiliza una tabla en la que las filas se agregan dinámicamente según el tamaño de la array de datos. Para esto, las filas se crean usando *ngFor y luego se muestran los datos de cada fila.

Requisito previo: aquí necesitará una API para obtener datos. También se puede crear una API falsa y se pueden almacenar datos: «https://www.mocky.io/».
Ejemplo: aquí, por ejemplo, ya tenemos una API falsa que contiene datos de empleados que buscaremos 
API: «http://www.mocky.io/v2/5ea172973100002d001eeada»
Pasos para mostrar los datos: 
 

• Paso 1: se crea la aplicación angular requerida y el componente (aquí el componente show-api)
• Paso 2: para usar HttpClient para nuestra aplicación, HttpClientModule se importa a app.module.ts
  app.module.ts: 
   

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

• Paso 3: en el archivo TypeScript del componente (aquí show-api.component.ts) importe HttpClient. HttpClient ayuda a representar y obtener datos. La API de detalles del empleado se utiliza para obtener datos. Obtenemos la respuesta de la API pasando la url de la API en el método get() y luego suscribiéndonos a la url. La respuesta de la API se almacena en una variable llamada li desde la cual la array de datos se almacena en una array llamada lista aquí. La array de lista nos ayudará a mostrar los datos. Se llama a una función definida por el usuario cuando llega la respuesta para ocultar el cargador. 
  mostrar-aplicación.component.ts:- 
   

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

• Paso 4: ahora la array de datos debe mostrarse usando HTML. Se utiliza una tabla en la que las filas se agregan dinámicamente según el tamaño de la array de datos. Para esto, las filas se crean usando *ngFor y luego se muestran los datos de cada fila. En este archivo, agregué un cargador que se carga hasta que llega la respuesta. 
  mostrar-aplicación.componente.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>                   

Salida: en la consola, también se puede ver la array de datos de la respuesta, que se usa más para mostrar datos.