Understanding Angular Change Detection: Strategies and Best Practices

A strong framework for creating dynamic web apps is Angular. One of its core features that ensures applications remain interactive and responsive is Angular Change Detection. This mechanism ensures that the view reflects updates in the application’s state. However, the default approach can sometimes lead to performance bottlenecks, especially in large applications. In this blog, we will explore different change detection strategies, including the popular OnPush strategy.

What is Angular Change Detection?

Angular Change Detection refers to the process by which the framework checks the component tree to see if any data has changed and updates the view accordingly. This process involves checking the component’s model or state, comparing it with the previous state, and if there are any changes, updating the DOM to reflect the new state.

Angular provides a default Angular Change Detection mechanism and also allows developers to customize this behavior using different strategies, the most commonly used being OnPush.

The Two Main Change Detection Strategies in Angular

Angular offers two change detection strategies:

1. Default Change Detection (ChangeDetectionStrategy.Default)
2. OnPush Change Detection (ChangeDetectionStrategy.OnPush)

Let’s take a deeper look at both strategies:

🔶 Default Change Detection Strategy

By default, Angular uses ChangeDetectionStrategy.Default for all components. This strategy runs Angular Change Detection for all components in the application every time an event or action occurs that could potentially modify the application’s state. This includes user events, HTTP requests, timers, or subscriptions to observables.

How it Works:

🔹When an event occurs (such as a button click or HTTP response), Angular runs Angular Change Detection from the top of the component tree down to the affected component.
🔹It checks every component and updates the view if any bound properties have changed.
🔹This approach can be performance-intensive, especially for large applications with deep component trees or frequent state changes.

When to Use Default Strategy:

🔹Default Angular Change Detection is suitable for smaller applications or components where performance is not a concern.
🔹It is also useful when you want to ensure that the view is always in sync with the model, no matter how complex the state is.

Drawback:

🔹In large applications, frequent checks on all components can lead to performance issues as Angular Change Detection needs to perform checks on all components in the component tree.

Example:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.Default
})
export class ChildComponent {
  @Input() data: any;
}

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: any;
}

🔶 When to Choose OnPush vs Default

While OnPush offers better performance, it may not always be the right choice depending on your application’s requirements. Let’s compare both strategies in different use cases:

Default Strategy is better suited when:

🔹Your application is simple, and performance is not a concern.
🔹You need to ensure that all components are always in sync with the data.
🔹The component tree is shallow, and change detection won’t cause a performance issue.

OnPush Strategy is better suited when:

🔹Your application is complex with many components.
🔹You are working with immutable data, and you want Angular to detect changes only when the inputs change.
🔹You are using observables and want Angular to run change detection only when the data changes.
🔹You want to optimize for performance by reducing unnecessary checks.

🔶 Manual Change Detection (ChangeDetectorRef)

In some situations, you might need more control over when change detection occurs. Angular provides the ChangeDetectorRef service, which allows you to manually trigger change detection.

Methods of ChangeDetectorRef:

➡️ detectChanges(): Change detection for the present component and its offspring is manually triggered. This method forces Angular to check the component for changes even if it’s using OnPush strategy.
➡️ markForCheck(): Marks the current component for checking during the next change detection cycle. This is useful when you want Angular to check the component even if it’s using OnPush strategy but want to wait for the next cycle.
➡️ detach(): Detaches the change detector for the current component from the change detection tree. After detaching, Angular will no longer check the component for changes until it is reattached using reattach().
➡️ reattach(): Reattaches the change detector that was previously detached, allowing Angular to check the component again for changes.

These methods give you more fine-grained control over the change detection cycle and can help optimize performance or ensure that your component is updated in response to specific changes.

Example:

import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData) {
  this.data = newData;
  this.cdr.markForCheck(); // Manually trigger change detection
 }
}

 this.cdr.detectChanges();

 this.cdr.markForCheck();

this.cdr.detach();

 this.cdr.reattach();