Change detection

Change detection is the process by which a framework notices that application data changed and updates the DOM to match.

Every UI framework has to answer one question: the data changed, so what on the screen must be updated? The mechanism that answers it is called change detection.

AngularJS uses the digest cycle. Each binding registers a watcher. During a digest, AngularJS runs all watchers, compares each value with the previous one, and repeats until nothing changes. The cost grows with the number of watchers on the page.

Angular checks a tree of components from the top down. With the default strategy, every component is checked on each pass. With ChangeDetectionStrategy.OnPush, a component is skipped unless something marked it as needing a check. Signals make this more precise, since Angular knows which components read the value that changed.

Example

A table with two thousand rows is slow in AngularJS because every digest evaluates thousands of watchers. The Angular version uses an OnPush row component with signal inputs. When one row changes, Angular checks that row and its ancestors and skips the other rows.

Common misunderstanding

Many developers believe an OnPush component updates only when its inputs change. Input changes are one trigger among several. The component is also checked when an event handler in its template runs, when the async pipe in its template receives a value, when a signal read in its template changes, or when code calls markForCheck().

A related mistake is mutating an object that was passed as an input. The reference is the same, so OnPush sees no change. Create a new object or use a signal.

In a hybrid application both mechanisms run, and ngUpgrade triggers an AngularJS digest after Angular's own pass. Busy screens feel this, which is one more reason to finish the migration. Details are in the migration guide.

Related terms

• Zoneless change detection
• Signals
• Hybrid application (AngularJS + Angular)