// order.component.ts
import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-order',
  standalone: true,
  template: `
    <p>Price: {{ price() }}</p>
    <button (click)="price.set(price() + 10)">Price +10</button>

    <p>Quantity: {{ quantity() }}</p>
    <button (click)="quantity.update((q) => q + 1)">Quantity +1</button>

    <p><strong>Total: {{ total() }}</strong></p>
  `,
})
export class OrderComponent {
  price = signal(100);
  quantity = signal(2);

  total = computed(() => this.price() * this.quantity());
}

/*
  Notes:
  - total is a computed signal — it recalculates automatically
    whenever price or quantity changes, with no manual recalculation
    code anywhere.
  - There's no dependency array: Angular knows total depends on price
    and quantity simply because the computed callback reads them. This
    is the key difference from React's useMemo, which needs the deps
    listed explicitly.
*/