6. ProductFormComponent (Formulario para añadir productos)

6.4. Integrar el formulario en AppComponent

En este punto solo recibimos los datos del formulario y los mostramos por consola.

No se crea todavía el producto en la lista porque eso requiere un paso adicional en el servicio donde generaremos el UUID.

Abrimos app.ts añadimos:

import { ProductFormComponent } from './components/product-form/product-form.component';

En el decorador:

imports: [CommonModule, ProductsListComponent, ProductFormComponent]

En app.ts, creamos el manejador del evento:

onProductoCreado(producto: any) {
  console.log('Producto recibido desde el formulario:', producto);
}

Ahora en app.html, encima del listado:

<main class="container mb-5">

  <app-product-form
    (productoCreado)="onProductoCreado($event)">
  </app-product-form>

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

</main>