Change detection
Change detection is the process of identifying relevant differences between successive states and determining the updates required in response.
Modern Angular
Angular change detection is the framework process that checks data bindings for changes and updates the rendered view accordingly.
- How it is used
- Propagates component-state changes through template bindings to render updated Angular views.
- How deep it goes
- Explains binding checks, lifecycle timing, Zone.js costs, signal behavior, and testing implications; defers the full mechanism beyond this overview.
- Examples
- Uses a click-updated `name` binding, a repeatedly called `fullName()` template function, and TestBed stub-component tests.
- What you can do after
- Diagnose/debug with it by identifying unnecessary template-function calls and triggering lifecycle-bound signal updates in tests.
Pro Angular 16
Change detection is Angular's process for detecting changes in application state and updating affected views.
- How it is used
- Reflects user interactions and data updates in HTML while framing the trade-off between conventional checks and signals.
- How deep it goes
- Explains triggering, template-expression evaluation, selective DOM updates, and redundant work; does not detail binding types.
- Examples
- Uses console-logged getters, an expensive count calculation, a mouseover-highlighted product row, and an Angular Material table.
- What you can do after
- Diagnose/debug with browser-console logs when an interaction reevaluates unaffected getters and causes slow updates.
Related concepts
- Zone.jsuses · Zone.js is a JavaScript library that provides execution contexts for tracking and intercepting asynchronous tasks and their completion.
- ngDoCheckused by · ngDoCheck is an Angular component lifecycle method that runs during change detection to support custom checking of state changes.
- signal-based componentcontrasts with · A signal-based component is a proposed Angular component whose checking is driven by changes to its signal properties rather than Zone.js-based change detection.
- template expressionuses · An Angular template expression is a fragment of code evaluated against component context whose value contributes to a binding or rendered content.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.