Why signals are introduced in Angular - Visual Breakdown

Concept Flow - Why signals are introduced

Old Angular Change Detection

↓

Detect Changes on Entire Component Tree

↓

Performance Issues

↓

Need for Fine-Grained Reactivity

↓

Introduce Signals

↓

Track Dependencies Precisely

↓

Efficient Updates & Better Performance

This flow shows how Angular moved from broad change detection to precise signals for better performance.

Execution Sample

Angular

import { signal } from '@angular/core';
const count = signal(0);
count.set(1);
console.log(count());

This code creates a signal, updates it, and reads its current value.

Execution Table

Step	Action	Signal Value	Effect
1	Create signal with initial value 0	0	Signal initialized
2	Set signal value to 1	1	Signal updated, triggers dependents
3	Read signal value	1	Returns current value 1

💡 Signal value read after update; shows precise tracking and update

Variable Tracker

Variable	Start	After Step 2	Final
count	0	1	1

Key Moments - 2 Insights

Why does Angular need signals instead of old change detection?

Old change detection checks the whole component tree, which can be slow. Signals track only what changes, making updates faster (see execution_table Step 2).

What happens when we set a new value to a signal?

Setting a signal updates its value and notifies only the parts that depend on it, avoiding unnecessary work (see execution_table Step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the signal value after Step 2?

A 1

B 0

C undefined

D null

💡 Hint

Check the 'Signal Value' column at Step 2 in the execution_table

At which step does the signal notify dependents about a change?

A Step 1

B Step 3

C Step 2

D No notification happens

💡 Hint

See the 'Effect' column in execution_table for Step 2

If we never call set() on the signal, what value does count() return?

A 1

B 0

C undefined

D Error

💡 Hint

Look at the initial signal value in variable_tracker and Step 1 of execution_table

Concept Snapshot

Signals in Angular track specific reactive values.
They replace broad change detection.
Use signal() to create, set() to update, and call() to read.
This leads to faster, precise UI updates.
Signals notify only dependents when changed.

Full Transcript

Angular introduced signals to improve performance by tracking reactive values precisely. Previously, Angular checked the entire component tree for changes, which could slow down apps. Signals hold a value and notify only the parts of the UI that depend on them when the value changes. For example, creating a signal with signal(0) sets its initial value to 0. When we update it with set(1), the signal changes to 1 and triggers updates only where needed. Reading the signal with count() returns the current value. This approach makes Angular apps faster and more efficient.