Performance impact of change detection in Angular

Introduction

Change detection helps Angular know when to update the screen. But if it runs too often or checks too much, it can slow down your app.

When your app feels slow after many user actions

When you have many components updating frequently

When you want to improve battery life on mobile devices

When you notice lag in animations or scrolling

When you want to optimize large lists or tables

Syntax

Angular

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {}

Use ChangeDetectionStrategy.OnPush to tell Angular to check only when inputs change.

The default is ChangeDetectionStrategy.Default, which checks often but can be slower.

Examples

This uses the default strategy, so Angular checks for changes often.

Angular

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-default',
  template: `<p>{{ counter }}</p>`,
  changeDetection: ChangeDetectionStrategy.Default
})
export class DefaultComponent {
  counter = 0;
}

This uses OnPush, so Angular checks only when counter input changes.

Angular

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-onpush',
  template: `<p>{{ counter }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {
  @Input() counter = 0;
}

Sample Program

This example shows a button that increases a number. The CounterComponent uses OnPush change detection, so it updates only when the input count changes.

This helps Angular skip unnecessary checks and improves performance.

Angular

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<p>Count: {{ count }}</p>`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  @Input() count = 0;
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="increment()">Increment</button>
    <app-counter [count]="counter"></app-counter>
  `,
  standalone: true,
  imports: [CounterComponent]
})
export class AppComponent {
  counter = 0;

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

Important Notes

OnPush works best when inputs are immutable or changed by replacing the object.

Too many checks slow down the app, so use OnPush to reduce work.

Use Angular DevTools to see how often change detection runs.

Summary

Change detection updates the screen when data changes.

Default strategy checks often but can slow down big apps.

OnPush strategy improves speed by checking less often.