Actividad entregable

5.1. Crear el componente

Creamos el componente tarjeta-producto dentro de la carpeta componentes.

Será un componente independiente (standalone).

ng generate component components/product-card --standalone --skip-tests

Este componente no carga datos.

Solo recibe un producto mediante @Input(), siguiendo el patrón padre → hijo

Abre product-card.component.ts  y déjalo así:

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Product } from '../../services/product.service';

@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './product-card.component.html'
})
export class ProductCardComponent {

  @Input() product!: Product; // Recibe un producto desde el padre

}

@Input() nos permite recibir el producto desde el componente padre.

@Output() nos permite emitir eventos hacia arriba, en este caso el ID del producto que queremos eliminar

Abre: tarjeta-producto.component.html

Este template usa Bootstrap para mostrar una tarjeta limpia.

El botón ‘Eliminar’ lanza el método onEliminar(), que subirá un evento al componente padre

<div class="card h-100 shadow-sm border-0">
  <img
    [src]="producto.image"
    class="card-img-top object-fit-cover"
    alt="{{ producto.name }}"
    style="height: 170px;"
  >

  <div class="card-body">
    <h5 class="fw-semibold">{{ producto.name }}</h5>

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

    <p class="fw-bold text-primary">
      {{ producto.price | currency:'EUR' }}
    </p>

    <div class="d-flex gap-2 mb-2">
      <span class="badge bg-dark">{{ producto.category }}</span>

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

  <div class="card-footer bg-white border-0 text-end">
    <button class="btn btn-sm btn-outline-danger" (click)="onEliminar()">
      Eliminar
    </button>
  </div>
</div>

Abre: lista-productos.component.ts

Añade la importación:

import { TarjetaProductoComponent } from '../tarjeta-producto/tarjeta-producto.component';

Actualiza el decorador:

imports: [CommonModule, TarjetaProductoComponent],

Ahora edita el HTML (lista-productos.component.html):

Cambia cada tarjeta por el componente:

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  <app-tarjeta-producto
    [producto]="producto"
    (eliminar)="onEliminar($event)">
  </app-tarjeta-producto>
</div>

Y en lista-productos.component.ts añade:

onEliminar(id: string) {
  console.log('Producto a eliminar:', id);
  // Aquí luego llamaremos al servicio
}

Cada tarjeta recibe un producto y puede emitir eventos.

Ahora todas las tarjetas usan nuestro nuevo componente.

Si pulso eliminar, veo en consola el ID del producto.

Cuando un botón de eliminar se pulse dentro de una tarjeta, el evento sube hasta la lista.

Ahora todas las tarjetas usan nuestro nuevo componente.

Si pulso eliminar, veo en consola el ID del producto.