Actividad entregable

3.3. Probar el servicio

De momento, vamos a probar que el servicio funciona haciendo una llamada en el AppComponent y sacando los datos por consola.

Llamamos a cargarProductos(), nos suscribimos al observable y mostramos el resultado con console.log

Ahora abrimos src/app/app.ts y añadimos el servicio.

import { Component, signal } from '@angular/core';
import { ProductService,Product } from './services/product';

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App {
  protected readonly title = signal('gestion-producto');

  constructor (private productService: ProductService){
    this.productService.cargarProductos().subscribe(
      (datos: Product[]) => {
        console.log('Productos cargados desde la API:', datos);
      }
    );
  }
}

Guardamos los cambios, nos aseguramos de que ng serve está en marcha y vamos al navegador. 

Abrimos las herramientas de desarrollo:

– En Chrome: F12 o Ctrl + Shift + I (en Mac, Cmd + Option + I)

– Entramos en la pestaña Console.

Veremos un mensaje:

Productos cargados desde la API: (10) [{...}, {...}, ...]

Eso significa que Angular se ha conectado correctamente a la API y está recibiendo los productos.