# Trace the value, not the component

Canonical HTML: https://yevgeniy-sorokin.pages.dev/knowledge/angular-value-trace/

Author: Yevgeniy Sorokin (@ewgenij87snwork)  
CKO: KA-0016@0.3.0  
Procedure: MP-0002@0.3.0

## Direct answer

When an Angular component shows a wrong, stale, or inconsistent value, treat the component as the observation point. Before adding another refresh, effect, subscription, lifecycle hook, or synchronization patch, trace the value backward.

For one value, establish:

1. what the value is supposed to mean;
2. which source is authoritative in the current phase;
3. how the consumer derives it;
4. every path that can write, patch, reset, or replace it;
5. which concrete runtime instance owns it;
6. which item or control it belongs to;
7. which prerequisites must be ready before the value is valid.

Then repair the first boundary where evidence shows that the actual value path violates the intended contract.

## Evidence classes

- OBSERVED: directly supported by runtime, test, log, code path, or equivalent evidence.
- INFERRED: plausible, but not directly established.
- UNKNOWN: material evidence is missing.

A repair boundary cannot rest on INFERRED or UNKNOWN evidence alone. Precedence is not causality.

## Decision rule

Choose the earliest causally evidenced contract violation, not the earliest structural difference.

Return STOP_UNKNOWN when the contract or causality cannot be established, a material repair boundary remains unsupported, or multiple candidate causes remain observationally equivalent.

Return STOP_NO_VIOLATION when the traced state path remains within the expected contract. Investigate another layer instead of forcing a state/data-flow fix.

## Procedure

1. Freeze the exact observation and reproduction.
2. Establish the expected contract.
3. Resolve authority for the current phase, or record UNKNOWN.
4. Trace the material derivation path.
5. Enumerate writers, patches, resets, rebinds, and activation conditions.
6. Prove runtime owner and instance identity where relevant.
7. Prove item identity and cardinality for repeated UI.
8. Record readiness prerequisites and whether partial state is allowed.
9. Classify each material edge as OBSERVED, INFERRED, or UNKNOWN.
10. Classify differences as intended or candidate contract violations.
11. Find the earliest causally evidenced contract violation.
12. STOP when evidence is insufficient or no state/data-flow violation exists.
13. Repair the smallest evidenced boundary.
14. Verify counterfactually under the same scenario.
15. Run a nearby valid adversarial case to guard against over-application.

## Angular applicability

Angular 22 is under active support as of 2026-10-05. Current adapters include Angular DevTools Injector Tree, signals and computed derivation, Reactive Forms, and signal queries such as viewChildren().

Maintained Angular 9-21 applications can use the same Value Trace method with version-appropriate provider, RxJS, forms, and query mechanisms. Do not force modernization merely to use the procedure.

## Executable evidence

A source-blind Angular 22.2.1 runtime suite executes F1-F6 plus V1-V6: 12 Value Trace fixture tests. Two generated application smoke tests also pass, for 14/14 total. Locked install and production build pass in CI.

The public proof companion is not exposed yet. Do not infer a public proof URL from this page.

## Limits

Value Trace does not claim that most Angular bugs are data-flow bugs. It does not make local providers, multiple writers, partial state, or legacy Angular patterns wrong by definition. It does not replace CSS, template, browser, network, or backend debugging.

## Related

- [5 Angular bugs that were really ownership and data-flow problems](https://yevgeniy-sorokin.pages.dev/notes/angular-data-flow-bugs/)

## Sources

- https://angular.dev/reference/releases
- https://angular.dev/reference/versions
- https://angular.dev/tools/devtools/injectors
- https://angular.dev/guide/signals/effect
- https://angular.dev/guide/forms/reactive-forms
- https://angular.dev/api/core/viewChildren