Angular Change Detection

Learning Objectives

By the end of this lesson, you will understand:

• What Change Detection is.
• Why Angular needs Change Detection.
• The complete Angular rendering lifecycle.
• How Zone.js works.
• Default Change Detection Strategy.
• OnPush Change Detection Strategy.
• Change Detection Tree.
• Component Dirty Checking.
• Immutable vs Mutable Objects.
• How Signals integrate with Change Detection.
• How ChangeDetectorRef works.
• markForCheck().
• detectChanges().
• detach() and reattach().
• Zoneless Angular.
• Change Detection optimization techniques.
• Performance bottlenecks.
• Enterprise best practices.
• Real-world architecture.
• Common mistakes.
• Advanced interview questions.

Introduction

Imagine you're building TechLearningPro.

A student clicks:

Complete Lesson

Immediately:

• Progress should become 72% → 76%
• Sidebar should update
• Progress bar should update
• Certificate eligibility should update
• Lesson button should become Completed

The developer never manually redraws the page.

Angular automatically updates the UI.

This process is called Change Detection.

What is Change Detection?

Change Detection is Angular's mechanism for keeping the UI synchronized with application state.

Whenever application data changes, Angular determines:

• What changed?
• Which component depends on it?
• Which DOM elements need updating?

Architecture:

Application State
        │
        ▼
Change Detection
        │
        ▼
Compare Values
        │
        ▼
Update DOM

Why Do We Need Change Detection?

Suppose:

username = 'Jagannath';

Template:

<h2>{{ username }}</h2>

Later:

username = 'Krishna';

Without Change Detection:

Browser
↓
Still Shows
Jagannath

With Angular:

username Changes
↓
Angular Detects Change
↓
DOM Updated
↓
Krishna

Angular Rendering Lifecycle

When data changes:

User Action
      │
      ▼
Component State Changes
      │
      ▼
Change Detection Starts
      │
      ▼
Angular Checks Bindings
      │
      ▼
DOM Updates
      │
      ▼
Browser Paint

What Triggers Change Detection?

Angular normally starts Change Detection after events such as:

• Button clicks
• Keyboard input
• HTTP responses
• Timers (setTimeout, setInterval)
• Promise resolution
• Observable emissions
• Signal updates

Example:

Button Click
↓
Counter++
↓
Change Detection
↓
UI Updates

Zone.js

Historically Angular relied on Zone.js.

Zone.js monitors asynchronous operations.

Examples:

Click Event
HTTP Request
Promise
Timer
Observable

Architecture:

Browser Event
↓
Zone.js
↓
Angular
↓
Change Detection

Zone.js automatically informs Angular that something may have changed.

Example with Button Click

count++;

Flow:

Button Click
↓
Zone.js
↓
Angular
↓
Change Detection
↓
DOM Updated

The developer doesn't manually refresh the screen.

Default Change Detection Strategy

Every component uses Default strategy unless specified otherwise.

Example:

@Component({
    changeDetection:
        ChangeDetectionStrategy.Default
})

Architecture:

Application
↓
Root Component
↓
Child
↓
Child
↓
Child
↓
Entire Tree Checked

Default strategy checks every component in the affected tree.

Example

Suppose:

App
├── Header
├── Dashboard
├── Footer

A button inside Dashboard changes.

With Default strategy:

App
↓
Header Checked
↓
Dashboard Checked
↓
Footer Checked

Even if Header and Footer didn't change.

Change Detection Tree

Angular organizes components into a tree.

AppComponent
│
├── Header
│
├── Sidebar
│
├── Dashboard
│      │
│      ├── Statistics
│      ├── Courses
│      └── Notifications
│
└── Footer

Angular traverses this tree during Change Detection.

OnPush Change Detection

Large applications benefit from:

OnPush

Example:

@Component({
changeDetection:
ChangeDetectionStrategy.OnPush
})

Architecture:

App
↓
Dashboard (OnPush)
↓
Only Updates
When Needed

Instead of checking continuously.

When Does OnPush Run?

An OnPush component updates when:

• An @Input() reference changes.
• An event occurs inside the component.
• A Signal changes.
• markForCheck() is called.
• detectChanges() is called.

Architecture:

OnPush Component
↓
Input Changed?
↓
Signal Changed?
↓
markForCheck()?
↓
Update

Why OnPush is Faster

Default:

100 Components
↓
Check All

OnPush:

100 Components
↓
Only 4 Need Update
↓
Check 4

This greatly reduces unnecessary work.

Mutable Objects Problem

Suppose:

user = {
name: 'Jagannath'
};

Later:

user.name = 'Krishna';

The object reference didn't change.

For OnPush this can be problematic.

Immutable Update

Preferred:

user = {
...user,
name: 'Krishna'
};

Architecture:

Old Object
↓
New Object
↓
Reference Changes
↓
OnPush Updates

Signals and Change Detection

Signals simplify Change Detection.

Example:

username = signal('Jagannath');

Later:

username.set('Krishna');

Architecture:

Signal
↓
Changed
↓
Dependent Component
↓
Update

Angular knows exactly what depends on the Signal.

ChangeDetectorRef

Sometimes developers manually control Change Detection.

Inject:

constructor(
private cd:
ChangeDetectorRef
){}

Useful APIs:

markForCheck()
detectChanges()
detach()
reattach()

markForCheck()

Marks an OnPush component for checking during the next Change Detection cycle.

Example:

this.cd.markForCheck();

Architecture:

Background Update
↓
markForCheck()
↓
Next Change Detection
↓
UI Updated

detectChanges()

Runs Change Detection immediately for the current component.

Example:

this.cd.detectChanges();

Architecture:

Component
↓
detectChanges()
↓
Immediate Refresh

Use sparingly.

detach()

Stops automatic Change Detection.

Example:

this.cd.detach();

Architecture:

Component
↓
Detached
↓
Angular Ignores

Useful for high-frequency dashboards.

reattach()

Enable Change Detection again.

this.cd.reattach();

Example

Live Stock Dashboard

Thousands of updates arrive every second.

Instead of:

Update UI
1000 Times

Detach:

Updates
↓
Store Values
↓
Every Second
↓
detectChanges()
↓
Refresh UI Once

Huge performance improvement.

Signals + OnPush

Modern Angular applications combine:

Signals
+
OnPush

Architecture:

Signal
↓
Component
(OnPush)
↓
Update Only
When Signal Changes

This is Angular's recommended modern approach.

Zoneless Angular

Angular is evolving toward Zoneless Change Detection.

Instead of relying on Zone.js:

Application
↓
Signals
↓
Explicit Reactivity
↓
UI Updates

Benefits:

• Better performance
• Simpler debugging
• Predictable rendering
• Less framework overhead

Enterprise Architecture

TechLearningPro

Backend API
↓
Course Store
↓
Signals
↓
Computed
↓
OnPush Components
↓
UI

Each feature owns its own state.

Performance Optimization

Prefer:

Signals
OnPush
Lazy Loading
Virtual Scrolling
Computed Signals
Pure Pipes

Avoid:

Huge Components
Mutable Objects
Heavy Templates
Repeated Function Calls
Massive Lists

Common Mistakes

Mutating Objects

Avoid:

course.title = 'Angular';

Prefer immutable updates.

Calling Functions in Templates

Avoid:

{{ calculateTotal() }}

Instead:

total = computed(...);

Default Strategy Everywhere

Large enterprise applications benefit from OnPush.

Overusing detectChanges()

It should not become your primary solution.

Fix the architecture first.

Massive Components

Break UI into:

Header
Sidebar
Content
Footer
Widgets

Smaller components reduce rendering work.

Real-Time Example

TechLearningPro Course Page

Course Store
↓
Signals
↓
Progress Signal
↓
Sidebar
↓
Progress Bar
↓
Certificate Widget
↓
Only These Update

The rest of the page remains untouched.

Advanced interview questions

Summary

Angular Change Detection is the engine that keeps your application responsive and efficient.

User Action / API / Signal
            │
            ▼
      State Changes
            │
            ▼
   Change Detection Engine
            │
    ┌───────┼────────┐
    ▼       ▼        ▼
  Signals  OnPush  Default
            │
            ▼
      Update Required UI
            │
            ▼
       Browser DOM

For a modern enterprise application like TechLearningPro, the ideal flow is:

Backend API
      │
      ▼
Feature Service
      │
      ▼
Signal Store
      │
      ▼
Computed Signals
      │
      ▼
OnPush Components
      │
      ▼
Minimal DOM Updates
      │
      ▼
Fast & Responsive UI

The core principle: Keep state reactive with Signals, use OnPush for efficient rendering, update data immutably, and let Angular refresh only what actually changed.

Next Lesson

Angular Dynamic Components — In the next lesson, you will learn:

• What Dynamic Components are.
• Why they are useful.
• ViewContainerRef.
• createComponent().
• Dynamic component injection.
• Passing inputs and outputs.
• Dynamic dialogs and modals.
• Plugin architecture.
• Dashboard widget systems.
• Lazy loading dynamic components.
• Enterprise use cases.
• Performance optimization.
• Advanced interview questions.