Actividad entregable

4.1. Inyectar ProductService y obtener productos

Creamos el componente dentro de la carpeta components, Lo hacemos standalone y sin tests

ng generate component components/products-list --standalone --skip-tests

Inyectamos el servicio y llamamos a cargarProductos(), como hicimos anteriormente

Este método devuelve un observable, así que nos suscribimos y guardamos los productos en un array local llamado productos.

Este array será el que usaremos en la plantilla para mostrarlos.

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

@Component({
  selector: 'app-products-list',
  imports: [],
  templateUrl: './products-list.html',
  styleUrl: './products-list.css',
})
export class ProductsList {
  productos: Product[] = [];

  constructor(private productService: ProductService) {
    this.productService.cargarProductos().subscribe(datos => {
      this.productos = datos;
      console.log('Productos recibidos:', datos);
    });
  }
}