How Does Angular Change Detection Work?

Angular change detection works by checking values used in a component's template and updating the DOM when those values have changed.

A simple way to remember the flow is:

Something happens
      ↓
Component state changes
      ↓
Angular determines that a view needs checking
      ↓
Angular evaluates template bindings
      ↓
Angular compares/updates rendered values
      ↓
DOM is updated where necessary

1. Full Simple Sample Program

counter.ts

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

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

  count = 0;

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

counter.html

<h2>Counter</h2>

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

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

2. How Does It Work?

Initially:

count = 0;

The template contains:

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

Angular evaluates the binding:

{{ count }}

and the browser displays:

Count: 0

Now the user clicks:

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

Angular executes:

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

The component value becomes:

count = 1

Angular then refreshes the relevant view during change detection.

It evaluates:

{{ count }}

The rendered value was previously:

0

The new value is:

1

Angular therefore updates the DOM:

Count: 1

3. Complete Flow

Think of it like this:

User clicks Increment
        ↓
(click) event occurs
        ↓
increment() executes
        ↓
count changes

0 → 1

        ↓
Angular schedules/runs the necessary
change-detection work
        ↓
Template binding evaluated

{{ count }}

        ↓
Rendered value needs to change?

0 ≠ 1

        ↓
YES
        ↓
DOM updated
        ↓
Count: 1

4. What Does Angular Check?

Consider:

export class Profile {

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

  changeCity(): void {
    this.city = 'Chennai';
  }
}

Template:

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

<p>Age: {{ age }}</p>

<p>City: {{ city }}</p>

<button (click)="changeCity()">
  Change City
</button>

Initially:

Syed
Age: 48
City: Erode

After clicking the button:

this.city = 'Chennai';

Angular evaluates the relevant template bindings during its checking process.

Conceptually:

name
'Syed' → 'Syed'
No rendered change

age
48 → 48
No rendered change

city
'Erode' → 'Chennai'
Changed

Therefore the UI becomes:

Syed
Age: 48
City: Chennai

Angular does not reload the entire browser page.

5. When Does Angular Know It Should Check?

This is an important interview point.

Application state can change because of many things:

User Event
   ↓
click / input / submit

HTTP Response
   ↓
API data arrives

Timer / Async operation
   ↓
setTimeout etc.

Parent Input
   ↓
new input value/reference

Observable
   ↓
new value emitted

Signal
   ↓
signal value changes

Angular's runtime and reactive APIs coordinate these events/state changes with rendering.

The exact scheduling details differ depending on whether the application uses Zone.js or modern zoneless change detection, so it is better not to memorize the oversimplified statement that "Zone.js is Angular change detection."

Zone.js can notify Angular that asynchronous work occurred; Angular's change-detection system is what checks and refreshes views.

6. Angular Component Tree

Angular applications are organized as a tree of views/components.

For example:

             App
              │
      ┌───────┼────────┐
      ↓       ↓        ↓
   Header   Products   Footer
              │
        ┌─────┼─────┐
        ↓     ↓     ↓
      P1     P2     P3

When change detection runs, Angular traverses views that need to be checked according to the configured change-detection strategy.

This is where Default and OnPush become important.

7. Default Change Detection

By default, a component uses:

ChangeDetectionStrategy.Default

For example:

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

@Component({
  selector: 'app-product',
  standalone: true,
  template: `<h2>{{ name }}</h2>`,
  changeDetection: ChangeDetectionStrategy.Default
})
export class Product {

  name = 'Laptop';
}

With Default, Angular uses its normal eager checking behavior when traversing the application views during change detection.

Conceptually:

Application event/state change
        ↓
Change Detection
        ↓
App
 ↓
Header
 ↓
Products
 ↓
Product components
 ↓
Footer

This does not mean Angular necessarily modifies every DOM element.

It checks bindings, and DOM changes are made only where required.

8. OnPush Change Detection

We can configure:

ChangeDetectionStrategy.OnPush

Example:

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

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    <h2>{{ name }}</h2>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Product {

  @Input() name = '';
}

OnPush allows Angular to skip component subtrees that don't need to be checked.

This can reduce unnecessary work in larger applications.

9. Change Detection with Signals

Modern Angular Signals make this even easier to understand.

Full 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);
  }
}

The template reads:

{{ count() }}

Angular tracks that this view depends on count.

When:

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

changes the signal, Angular is notified that the consuming view needs to be refreshed.

count signal
    ↓
0 → 1
    ↓
Signal notifies Angular
    ↓
Dependent view marked for refresh
    ↓
Angular performs rendering/change detection
    ↓
{{ count() }} evaluated
    ↓
DOM updated

This is one reason Signals are important in modern Angular: they provide fine-grained information about reactive dependencies.

10. Does Angular Compare the Entire DOM?

No.

A common misunderstanding is:

Angular compares the old DOM with the new DOM.

That isn't the right mental model.

Angular primarily works from its generated template instructions and binding state.

For:

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

Angular tracks the binding values associated with:

name
city

If:

this.city = 'Chennai';

causes the rendered city value to differ, Angular updates the corresponding DOM text.

So think:

Component State
      ↓
Template Bindings
      ↓
Change Detection
      ↓
Necessary DOM Updates

rather than:

Old DOM
   ↓
Compare entire DOM
   ↓
New DOM

11. Change Detection vs DOM Update

These are different steps.

Change Detection

Angular determines whether bound values require a view update.

Old binding value: Erode
New binding value: Chennai

DOM Update

Angular performs the corresponding browser DOM operation.

Erode → Chennai

Therefore:

Data changes
     ↓
View scheduled/marked
     ↓
Change Detection
     ↓
Binding evaluated
     ↓
Value changed?
   /       \
 No         Yes
 ↓           ↓
Nothing    Update DOM

12. Important Note About Zone.js

You may see older interview explanations like:

"Angular change detection works using Zone.js."

That is incomplete.

Traditionally, Angular commonly used Zone.js to detect that asynchronous activity such as events or timers occurred and to schedule Angular's synchronization work.

Conceptually:

Browser async activity
        ↓
Zone.js observes completion
        ↓
Angular is notified
        ↓
Change detection
        ↓
DOM updated if necessary

But modern Angular also supports zoneless change detection, where Angular relies on its own notification mechanisms such as Signals, template listeners, AsyncPipe, view attachment, and APIs that mark views for checking.

Therefore, for a modern interview, say:

Zone.js can help Angular know when asynchronous activity has occurred, but Zone.js itself is not change detection. Modern Angular can also operate without Zone.js.

13. Key Points

• Change detection keeps the component state and UI synchronized.
• Angular evaluates template bindings to determine whether rendered values need updating.
• Angular does not reload the page when component state changes.
• Angular does not simply rebuild the entire DOM.
• Angular applications consist of a tree of views/components.
• Default performs normal eager component-tree checking.
• OnPush allows Angular to skip unnecessary component subtrees.
• Signals notify Angular when reactive state used by a view changes.
• Zone.js and change detection are not the same thing.
• Modern Angular supports both Zone.js-based and zoneless change-detection approaches.

Interview Questions and Answers

1. How does Angular change detection work?

Angular checks template-bound values when a view needs to be refreshed. If a rendered binding value has changed, Angular performs the necessary DOM update.

2. Does Angular reload the page during change detection?

No. Angular updates only the necessary DOM state without performing a full browser page reload.

3. Does Angular compare the old DOM with the new DOM?

Not as its primary change-detection model. Angular evaluates generated template bindings/instructions and updates DOM nodes when their rendered values need to change.

4. What can cause Angular to update a view?

Examples include:

Events
Signals
Input changes
Observable/AsyncPipe emissions
HTTP responses
Timers/async operations
Manual change-detection APIs

The exact notification mechanism depends on the application's configuration.

5. What is the role of Zone.js?

Zone.js traditionally helps Angular know that asynchronous work has occurred so synchronization/change detection can be scheduled.

It is not change detection itself, and modern Angular can also run zoneless.

6. What are the change-detection strategies?

ChangeDetectionStrategy.Default
ChangeDetectionStrategy.OnPush

7. Why is OnPush useful?

OnPush allows Angular to skip component subtrees that do not need checking, which can reduce unnecessary work and improve performance in larger applications.

8. How do Signals work with change detection?

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

count = signal(0);

count.update(x => x + 1);

Interview Quick Answer

Angular change detection works by evaluating template-bound values when views need checking. When a bound value has changed, Angular updates the corresponding DOM. Angular supports Default and OnPush strategies, and modern Angular Signals provide fine-grained notifications about state changes.