What is Change Detection in Angular?

1. What is Change Detection?

Change Detection is the mechanism Angular uses to detect changes in application data/state and update the DOM (UI) accordingly.

In simple terms:

When component data changes, Angular checks the values used by the template and updates the UI where necessary.

For example:

name = 'Syed';

<h2>{{ name }}</h2>

Initially the browser displays:

Syed

If the component changes:

this.name = 'Mohamed';

Angular's change detection causes the UI to display:

Mohamed

So the basic flow is:

Component data changes
        ↓
Angular runs Change Detection
        ↓
Angular evaluates template bindings
        ↓
Changed values are identified
        ↓
DOM is updated
        ↓
User sees the new value

2. Why Do We Need Change Detection?

An Angular application's state changes constantly.

For example:

• User clicks a button
• User enters text
• HTTP API returns data
• Timer completes
• Parent sends new data to a child
• A Signal changes
• An Observable emits a value

Angular needs a mechanism to ensure the view represents the current application state.

Without change detection, you could change:

this.count = 10;

but the HTML could continue displaying the old value.

Change detection keeps:

Component State
      ↕
     View

synchronized.

3. Full Simple Sample Program

Let's create a simple counter.

counter.ts

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

@Component({
  selector: 'app-counter',
  standalone: true,
  templateUrl: './counter.html',
  styleUrl: './counter.css'
})
export class Counter {

  count = 0;

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

  decrement(): void {
    this.count--;
  }
}

counter.html

<h2>Angular Change Detection</h2>

<p>Count: {{ count }}</p>

<button (click)="increment()">
  Increment
</button>

<button (click)="decrement()">
  Decrement
</button>

counter.css

button {
  margin-right: 10px;
}

4. Program Explanation

Initially:

count = 0;

Angular evaluates:

<p>Count: {{ count }}</p>

Therefore, the browser displays:

Count: 0

Now the user clicks:

<button (click)="increment()">

Angular executes:

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

The value changes:

0 → 1

Angular's change-detection mechanism makes the template reflect the new value:

{{ count }}

The browser now displays:

Count: 1

Conceptually:

User clicks Increment
        ↓
increment()
        ↓
count changes
0 → 1
        ↓
Change Detection
        ↓
Angular evaluates {{ count }}
        ↓
DOM updated
        ↓
Count: 1

5. What Does Angular Actually Check?

Suppose we have:

name = 'Syed';
age = 48;
city = 'Erode';

And:

<h2>{{ name }}</h2>
<p>{{ age }}</p>
<p>{{ city }}</p>

Angular tracks/evaluates the values associated with these template bindings during change detection.

If:

this.city = 'Chennai';

the resulting UI change is:

Before:

Syed
48
Erode


After:

Syed
48
Chennai

Angular does not simply rebuild the entire page. It updates the relevant DOM state where a binding's rendered value needs to change.

6. What Can Trigger Change Detection?

Common sources include:

User events

<button (click)="save()">Save</button>

Examples:

click
input
change
keyup
submit

HTTP/API responses

this.http.get('/api/products').subscribe(products => {
  this.products = products;
});

When the data arrives, the component state changes and the UI can be refreshed.

Async operations

For example:

setTimeout(() => {
  this.message = 'Completed';
}, 2000);

Parent-child communication

A changed input can cause a child component's view to need checking.

Signals

Modern Angular Signals integrate directly with Angular's rendering/change-detection system.

count = signal(0);

increment() {
  this.count.update(value => value + 1);
}

Template:

<p>{{ count() }}</p>

Changing the signal notifies Angular that consumers of that signal may need refreshing.

7. Change Detection Strategies

Angular provides two important component change-detection strategies:

Default
OnPush

They are configured through:

ChangeDetectionStrategy

For example:

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

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './product.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Product {
}

Default

changeDetection: ChangeDetectionStrategy.Default

Angular uses the normal eager checking behavior for that component/subtree when change detection runs.

This is convenient and is often easiest for beginners.

OnPush

changeDetection: ChangeDetectionStrategy.OnPush

OnPush allows Angular to avoid unnecessary checking of a component subtree under appropriate conditions.

It is particularly useful when applications use patterns such as:

• immutable state
• Signals
• Observables with AsyncPipe
• predictable input references

This can improve performance in large component trees.

8. Simple Default vs OnPush Idea

Imagine:

App
├── Header
├── ProductList
│   ├── Product 1
│   ├── Product 2
│   └── Product 3
└── Footer

With normal change detection, Angular may traverse a broader part of the component tree when a check occurs.

With OnPush, Angular has more opportunities to skip component subtrees that do not need checking.

So conceptually:

Default

Event
  ↓
Change Detection
  ↓
Broader component-tree checking

versus:

OnPush

Event / relevant state change
  ↓
Change Detection
  ↓
Unnecessary subtrees can be skipped

9. Change Detection and Signals

Signals are especially important in modern Angular.

Example:

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <h2>Count: {{ count() }}</h2>

    <button (click)="increment()">
      Increment
    </button>
  `
})
export class Counter {

  count = signal(0);

  increment(): void {
    this.count.update(value => value + 1);
  }
}

Here:

count = signal(0);

creates reactive state.

The template reads:

{{ count() }}

When:

this.count.update(value => value + 1);

runs, Angular knows the signal changed and schedules the appropriate UI work.

Conceptually:

Signal changes
      ↓
Angular is notified
      ↓
Affected view needs refresh
      ↓
Change detection/rendering
      ↓
DOM updated

This gives Angular more precise information about what state changed and which views consume it.

10. Change Detection vs DOM Update

These two concepts are related but not identical.

Change detection is Angular determining whether template-bound values require updating.

DOM update is Angular applying the required changes to the browser's rendered DOM.

Conceptually:

State changes
     ↓
Change Detection
     ↓
Template value changed?
     ↓
    Yes
     ↓
DOM Update

11. Key Points

• Change Detection keeps the Angular UI synchronized with application state.
• Angular evaluates template bindings and updates the DOM when necessary.
• User events, asynchronous work, API responses, inputs, Observables, and Signals can lead to UI updates.
• Angular supports Default and OnPush change-detection strategies.
• OnPush can reduce unnecessary component-tree checking.
• Signals integrate closely with modern Angular's rendering/change-detection model.
• Change detection does not mean rebuilding the entire DOM.
• Understanding change detection becomes important when optimizing large Angular applications.

12. Interview Questions and Answers

1. What is change detection in Angular?

Change detection is Angular's mechanism for detecting changes in application state and keeping the DOM synchronized with that state.

2. Why is change detection required?

Because component data changes over time. Angular needs to detect those changes and update the corresponding UI.

3. What are the Angular change-detection strategies?

The main strategies are:

ChangeDetectionStrategy.Default
ChangeDetectionStrategy.OnPush

4. What is the Default change-detection strategy?

It is Angular's normal eager checking strategy. When change detection runs, Angular checks components according to its standard component-tree traversal rules.

5. What is OnPush?

OnPush is a strategy that allows Angular to skip checking a component subtree when Angular determines that the subtree does not require checking.

changeDetection: ChangeDetectionStrategy.OnPush

6. Why use OnPush?

It can reduce unnecessary component checks and improve performance, especially in larger applications with predictable reactive or immutable state.

7. Do Signals work with change detection?

Yes. When a template reads a Signal, Angular tracks that dependency. When the Signal changes, Angular knows that the consuming view may need to be refreshed.

count = signal(0);

8. Does change detection recreate the entire DOM?

No. Angular checks bindings and applies the necessary DOM updates rather than rebuilding the entire page.

9. What is a simple real-world example of change detection?

count = 0;

increment() {
  this.count++;
}

<p>{{ count }}</p>
<button (click)="increment()">+</button>

When count changes, Angular updates the displayed value.

10. What is the easiest interview definition?

Angular Change Detection is the mechanism that detects changes in application state and updates the corresponding view so that the UI stays synchronized with the component data.