Angular7 - Cliente Http

HttpClient nos ayudará a obtener datos externos, publicarlos, etc. Necesitamos importar el módulo http para hacer uso del servicio http. Consideremos un ejemplo para entender cómo hacer uso del servicio http.

Para comenzar a usar el servicio http, necesitamos importar el módulo en app.module.ts como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Si ve el código resaltado, hemos importado el HttpClientModule desde @angular/common/http y lo mismo también se agrega en la matriz de importaciones.

Obtendremos los datos del servidor utilizando el módulo httpclient declarado anteriormente. Lo haremos dentro de un servicio que creamos en el capítulo anterior y usaremos los datos dentro de los componentes que queramos.

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

Hay un método agregado llamado getData que devuelve los datos obtenidos para la URL proporcionada.

El método getData se llama desde app.component.ts de la siguiente manera:

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public persondata = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.persondata = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.persondata);
      });
   }
}

Estamos llamando al método getData que devuelve un tipo de datos observables. Se utiliza el método de suscripción que tiene una función de flecha con los datos que necesitamos.

Cuando revisamos el navegador, la consola muestra los datos como se muestra a continuación:

Usemos los datos en app.component.html de la siguiente manera:

<h3>Users Data</h3>
<ul>
   <li *ngFor="let item of persondata; let i = index"<
      {{item.name}}
   </li>
</ul>

Output