Change detection in Angular is the mechanism that keeps the view in sync with the component’s data. Angular provides two strategies — Default and OnPush — to determine when and how it checks for changes and updates the DOM.
What are change detection strategies in Angular, and how do they work?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Change detection in Angular is the process by which the framework synchronizes the application's data model (component properties) with the view (DOM). Whenever the data changes, Angular determines what parts of the view need to be updated and efficiently re-renders them. This is one of the most critical mechanisms in Angular’s performance model.
How Change Detection Works
Angular maintains a tree of components, each associated with a change detector. Whenever a change occurs (for example, a user event, async call, or timer), Angular traverses this tree and checks if the component’s data bindings have changed. If a change is detected, the DOM is updated accordingly.
Change Detection Strategies
Angular provides two strategies to control how and when the change detection mechanism runs:
Strategy | Description |
|---|---|
| This is the default strategy. Angular checks every component in the component tree during every change detection cycle, whether or not its input data has changed. It’s simple but less efficient for large applications. |
| With this strategy, Angular only checks the component and its children when specific conditions occur — such as when an @Input() reference changes, an event originates from inside the component, or you manually trigger detection. This makes the app faster and more predictable. |
TYPESCRIPT
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-user-card',
template: `<p>{{ user.name }}</p>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserCardComponent {
user = { name: 'Alice' };
}
In the example above, the component uses the OnPush strategy. Angular will only re-check this component when the user reference changes — not when you mutate its properties (e.g., user.name = 'Bob').
When Does Angular Trigger Change Detection?
Angular triggers change detection automatically in response to various async events, such as:
- User interactions (clicks, input changes, etc.)
- Promises and Observables completing
- setTimeout() and setInterval() callbacks
- XHR or fetch responses
Manually Controlling Change Detection<br>For performance-sensitive applications, developers can control change detection manually using the ChangeDetectorRef API.
TYPESCRIPT
import { ChangeDetectorRef, Component } from '@angular/core';
@Component({ selector: 'app-demo', template: `{{ counter }}` })
export class DemoComponent {
counter = 0;
constructor(private cd: ChangeDetectorRef) {}
increment() {
this.counter++;
this.cd.detectChanges(); // manually trigger change detection
}
}
Performance Considerations
Defaultis simpler and sufficient for smaller apps but can become costly for large component trees.OnPushis more performant and should be used when components depend on immutable data or pure inputs.- Manual detection control (using
ChangeDetectorRef) is useful for advanced optimization scenarios.
Think of Angular change detection as a 'smart mirror' — by default it checks everything for changes, but with OnPush you tell it to look only when you know something has changed.
Summary
- Change detection keeps the UI in sync with data changes.
- Two strategies exist — Default (checks all) and OnPush (checks only when inputs or events trigger).
- OnPush provides better performance for immutable and reactive data flows.
- Developers can use
ChangeDetectorReffor fine-grained control.
Similar questions
Guides