Actividad entregable

4.2. Mostrar productos usando @for

for es la nueva sintaxis moderna de Angular para recorrer listas.

• product of productos recorre la lista
• track product._id mejora el rendimiento
• @empty se ejecuta si la lista está vacía

Abre products-list.component.html

<h2 class="fw-semibold mb-3">Listado de Productos</h2>

<ul class="list-group">
  @for (product of productos; track product._id) {
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        <strong>{{ product.name }}</strong>  
        <span class="text-muted">({{ product.category }})</span>
      </span>

      <span class="fw-bold text-primary">{{ product.price }} €</span>
    </li>
  }

  @empty {
    <li class="list-group-item text-muted">
      No hay productos para mostrar…
    </li>
  }
</ul>