SaptarshiTech.In
Hire Me
Mastering OnPush Change Detection in Angular for Peak Performance
Mastering OnPush Change Detection in Angular for Peak Performance

Mastering OnPush Change Detection in Angular for Peak Performance

Saptarshi Chakraborty

Saptarshi Chakraborty

August 23, 2026 • 1 min read

Learn how to implement OnPush change detection in your Angular application to eliminate unnecessary rendering cycles and optimize speed.

Table of Contents

By default, Angular uses the Default change detection strategy, which checks every component in the tree on almost any event. Switching to OnPush change detection restricts checks to direct input changes or events fired within the component, greatly reducing main-thread load. Achieving this at scale is a common task when seeking Angular performance optimization.

How to Configure OnPush

To enable OnPush change detection, set the changeDetection property in your component decorator. This informs Angular that it should only evaluate changes if a new object reference is passed as an `@Input`:

@Component({
  selector: 'app-perf-item',
  templateUrl: './perf-item.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PerfItemComponent {
  @Input() data!: Record<string, any>;
}

Common Pitfalls with OnPush

The most common issue with OnPush is mutability. If you modify a property inside an object (e.g. `data.title = 'New'`) without changing the object reference, Angular will not detect the change. Always use immutable data structures or the spread operator to trigger checks:

// Wrong: data.title = 'New';
// Correct:
this.data = { ...this.data, title: 'New' };

Topics

You might also like

Back to All Blogs