How Angular Change Detection Works

Angular Change Detection is a mechanism that, whenever data changes in your component then Angular updates the UI automatically.

Change Detection Process

1. Angular detects a change in the component.

2. Angular compares the current value with the previous value.

3. Angular updates the DOM where changes are found.

Important Notes:

1. Angular uses Zone.js to know when to run change detection.

2. Change detection starts from the root component and moves downward.

Change Detection Strategies

Angular provides two change Detection Strategies

1. Default Change Detection

Angular checks the component on every change detection cycle, even if the input data hasn’t changed in the component.

Note: It impacts the performance issue in a large application.

Syntax:

@Component({
selector: 'myapp-example',
changeDetection: ChangeDetectionStrategy.Default
})

2. OnPush Change Detection

It is used for better performance because it does not check unnecessary components.

When does Angular check the component?

There are many points below

1. OnPush Change Detection works when the Input reference changes.

2. OnPush Change Detection works when an event occurs inside the component.

3. OnPush Change Detection works when the Observable emits a new value.

4. OnPush Change Detection works when you manually trigger.

Syntax:

@Component({
selector: 'myapp-example',
changeDetection: ChangeDetectionStrategy.OnPush
})

Default vs OnPush Comparison

Feature	Default Strategy	OnPush Strategy
Runs on every cycle	Yes	no
Performance optimized	no	yes
Requires immutability	no	yes
Best for large apps	no	yes

Common Change Detection Mistakes

There are many common change Detection mistakes.

1. If you use the Default strategy everywhere.

2. If you are not using trackBy in *ngFor

3. Mutating objects instead of changing references.

Example: wrong way

this.user.name = 'John'; // wrong way

Correct way to define a name

this.user = { ...this.user, name: 'John' }; // correct way

What is the Best practice in Change Detection?

There are many best practices in Change Detection

1. You should use OnPush change detection.

2. You should use trackBy in lists.

3. You should prefer Observables with the async pipe.

4. You should avoid heavy logic in templates.

5. You should break large components into smaller ones.

Example of OnPush Change Detection

@Component({
selector: 'app-counter',
template: `{{ count }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
count = 0;

increment() {
this.count++;
}
}

How Angular Change Detection Works – Interview Questions