Actividad entregable

4.3. Añadir ProductsListComponent al App

Colocamos el componente directamente en el AppComponent.

Abrimos app.ts y añade:

import { ProductsListComponent } from './components/products-list/products-list.component';

imports: [CommonModule, ProductsListComponent]

El archivo que tenemos es este:

import { Component, signal } from '@angular/core';
import { ProductService, Product } from './services/product';
import { ProductsList } from './components/products-list/products-list';


@Component({
  selector: 'app-root',
  imports: [ProductsList],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('gestion-productos');

  productos: Product[] = [];

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

Y en app.html, dentro del <main>

<main class="container mb-5">

  <app-products-list></app-products-list>

</main>

Ahora sí, la lista de productos que viene de la API aparecerá en pantalla.

El archivo app.html que nos queda es este: 

<!-- CABECERA -->
<header class="bg-dark text-white py-3 mb-4">
  <div class="container d-flex justify-content-between align-items-center">
    <h1 class="h3 m-0">Gestión de Productos</h1>

    <nav>
      <a href="#" class="text-white text-decoration-none me-3">Inicio</a>
      <a href="#" class="text-white text-decoration-none">Contacto</a>
    </nav>
  </div>
</header>

<!-- CONTENIDO PRINCIPAL -->
<main class="container mb-5">
  <app-products-list></app-products-list>
</main>

<!-- FOOTER -->
<footer class="bg-light py-3 text-center border-top mt-5">
  <p class="m-0 text-muted">
    © 2025 · Actividad DWEC · Angular 18
  </p>
</footer>