Actividad entregable

5.4. Crear la tarjeta visual con Bootstrap

Creamos una tarjeta Bootstrap que muestra los datos del producto: imagen, nombre, descripción, precio, categoría y estado.

Al final añadimos el botón de eliminar.

Según el enunciado, este componente debe permitir eliminar productos, así que dejamos el botón listo. 

Pero todavía no implementamos la lógica; eso lo haremos más adelante, cuando preparemos el servicio para modificar la lista.

Abre product-card.component.html y pega:

<div class="card h-100 shadow-sm border-0">

  <img [src]="product.image"
       class="card-img-top"
       alt="{{ product.name }}"
       style="object-fit: cover; height: 180px;">

  <div class="card-body">

    <h5 class="fw-semibold">{{ product.name }}</h5>

    <p class="text-muted small mb-2">{{ product.description }}</p>

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

    <span class="badge bg-dark me-2">{{ product.category }}</span>

    <span class="badge"
          [class.bg-success]="product.active"
          [class.bg-danger]="!product.active">
      {{ product.active ? 'Activo' : 'Inactivo' }}
    </span>

    <button class="btn btn-danger btn-sm w-100 mt-3">
      Eliminar producto
    </button>

  </div>

</div>

Ahora cada producto se muestra en una tarjeta visual completa, con su información y su botón de eliminar. De momento ese botón no hace nada.