refactor: update product selection logic and bindings

src/app/product-selection/product-selection.component.html

@@ -1,4 +1,4 @@
-<select [ngModel]="selectedProductId()" (ngModelChange)="onProductChange($event)">
+<select [ngModel]="selectedProduct()" (ngModelChange)="onProductChange($event)">
   <option [ngValue]="null">Select a product</option>
-  <option *ngFor="let product of products()" [ngValue]="product.id">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
+  <option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
 </select>

src/app/product-selection/product-selection.component.ts

@@ -28,12 +28,7 @@ export type Product = {
 export class ProductSelectionComponent implements OnInit {
   products = signal<Product[]>([]);
 
-  selectedProductId = signal<number | null>(null);
-  
-  selectedProduct = computed(() => {
-    const id = this.selectedProductId();
-    return id ? this.products().find(p => p.id === id) || null : null;
-  });
+  selectedProduct = signal<Product | null>(null);
 
   quantity = signal<number>(1);
   
@@ -46,8 +41,8 @@ export class ProductSelectionComponent implements OnInit {
     this.productService.getProducts().subscribe(products => this.products.set(products));
   }
 
-  onProductChange(productId: number) {
-    this.selectedProductId.set(productId);
+  onProductChange(selectedProduct: Product) {
+    this.selectedProduct.set(selectedProduct);
     const product = this.selectedProduct();
     if (product) {
       this.productChange.emit(product);