Cargar datos con un observable en Angular 2+

Hola a todos, hoy os voy a enseñar como cargar datos con un observable en Angular 2+.

Para cargar datos en nuestra aplicación, lo ideal es usar promesas o observables, en este caso veremos los observables.

En nuestro caso, vamos a recoger datos de https://www.thecocktaildb.com/api.php

En esta API, nos devolverá datos sobre cocktails. Vamos a mostrar todos los cocktails que contienen el nombre de margarita, en concreto, vamos a llamar a esta url:

https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita

Si la pones en el navegador, veras los datos que vamos a recoger en Angular.

Vamos a crear un servicio para recuperar los datos:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs'
@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

  getCocktails(): Observable<any> {

    const urlBase = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita';

    return this.http.get(urlBase);

  }

}

Recordar que debemos importar el modulo HttpClientModule en app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  imports: [
    BrowserModule, 
    FormsModule,
    HttpClientModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [DataService]
})
export class AppModule { }

En el app.component.ts, inyectaremos el servicio de data.service.ts, llamaremos la función que hemos creado y nos subscribiremos para que nos lleguen los datos.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  
  public listCocktails: any[];

  constructor(private data: DataService){
    this.listCocktails = [];
  }

  ngOnInit(){
    this.data.getCocktails().subscribe(cocktails => {
      this.listCocktails = cocktails.drinks;
      console.log(this.listCocktails);
    });
  }

}

Estas lineas son las importantes:

 this.data.getCocktails().subscribe(cocktails => {
    this.listCocktails = cocktails.drinks;
    console.log(this.listCocktails);
 });

IMPORTANTE: lo de cocktails.drinks, es porque el objeto que viene es así.

Ya tenemos los cocktails, así que podemos recorrerlos en el html, cogeremos el nombre del cocktail (strDrink) y la imagen del mismo(strDrinkThumb).

<div *ngFor="let drink of listCocktails">
	

Nombre: {{drink.strDrink}}

	<img [src]="drink.strDrinkThumb">
 </div>

Os dejo el ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte