Practical technology learning
Angular Computed Signals: Derive a Total from Its Inputs
A duplicated total can become stale even when its inputs are correct. This Angular planning exercise gives quantity and unit price clear ownership, then derives the display total from them. The basket and values are fictional and intentionally small.
Name the inputs and the derivation
Use quantity = signal(2), unitPrice = signal(15), and total = computed(() => quantity() * unitPrice()). Import the supported APIs from Angular core in an appropriate local project. The expected first read of total() is 30. Keep the integer example separate from a real currency implementation.
Predict a sequence before implementing it
Read the total, set quantity to 3 and read again. The expected values are 30 and 45. Next set unit price to 20 and expect 60. Set quantity to zero and expect zero. A four-line prediction sheet makes it easier to see whether a later mismatch comes from input ownership, the derivation or the template.
Keep the total read-only
A computed signal derives its value from signals it reads. It does not expose a set operation like a writable signal. For this design, update quantity or price rather than attempting to assign a new total. A separately writable total would need its own synchronization rule and is unnecessary for the stated calculation.
Understand when work happens
Computed signals are lazy and memoized. The first read evaluates the derivation; repeated reads can reuse the cached result. A tracked input change invalidates that result, and a later read obtains the updated calculation. Do not use console timing or an assumed eager evaluation order as the definition of correctness.
Review the exercise boundary
- Keep the derivation a focused value calculation.
- Define validation rules for quantity and price separately.
- Distinguish this integer example from currency rounding and payment logic.
- Record the Angular version when trying the proposed component locally.
Explain the ownership in plain language
The user changes the inputs; the total follows their current values. That explanation is the intended learning output. Components and state concepts are part of the Mango Engineers Angular learning path. Try the small example locally and keep the prediction sheet beside the component for review.