Signal vs observable comparison in Angular - Visual Side-by-Side Comparison

Concept Flow - Signal vs observable comparison

Create Signal

↓

Set initial value

↓

Update Signal value

↓

Signal auto-triggers

↓

UI updates/reacts

Signals hold a value and auto-update dependents when changed. Observables emit streams of values that subscribers listen to and react.

Execution Sample

Angular

import { signal } from '@angular/core';
import { Observable } from 'rxjs';

const count = signal(0);
const count$ = new Observable(subscriber => {
  subscriber.next(0);
});

count.set(1);
count$.subscribe(value => console.log(value));

Shows creating a signal and an observable with initial values, updating the signal, and subscribing to the observable.

Execution Table

Step	Action	Signal Value	Observable Emission	Effect
1	Create signal with 0	0	N/A	Signal holds 0
2	Create observable emitting 0	0	0 emitted	Subscribers can listen
3	Update signal to 1	1	0 (no new emission)	Signal triggers dependents
4	Subscribe to observable	1	0 received	Subscriber logs 0
5	Observable emits 1	1	1 emitted	Subscriber logs 1
6	Signal auto-updates UI	1	1 emitted	UI reflects signal value 1

💡 Execution stops after observable emits and signal updates UI

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
count (signal)	0	1	1	1
count$ (observable)	no emission	0 emitted	1 emitted	1 emitted

Key Moments - 2 Insights

Why does the signal update UI automatically but observable needs subscription?

Signals hold a current value and auto-notify dependents on change (see Step 3 and 6). Observables emit values over time and require explicit subscription to react (see Step 4).

Can signals emit multiple values like observables?

Signals hold one current value that updates. Observables can emit many values over time. Signals are simpler for state, observables for streams (see Steps 1-5).

Visual Quiz - 3 Questions

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

A 0

B 1

C undefined

D null

💡 Hint

Check the 'Signal Value' column at Step 3 in the execution table

At which step does the observable emit its first value?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Observable Emission' column to find the first emission

If the signal value changes, what happens automatically?

A Nothing happens

B Subscribers must manually check

C UI and dependents auto-update

D Observable emits new value

💡 Hint

Refer to Step 6 in the execution table showing signal effect

Concept Snapshot

Signal vs Observable in Angular:
- Signal holds a single reactive value.
- Observable emits multiple values over time.
- Signals auto-update dependents/UI on change.
- Observables require subscription to react.
- Use signals for state, observables for event streams.

Full Transcript

This visual compares Angular signals and observables. Signals hold a current value and automatically notify dependents when updated, causing UI to refresh. Observables emit streams of values that subscribers listen to and react upon. The execution table shows creating a signal and observable, updating the signal, subscribing to the observable, and how each triggers reactions. Key moments clarify why signals auto-update UI while observables need subscriptions, and the difference in value emission. The quiz tests understanding of signal values, observable emissions, and automatic updates. This helps beginners see how signals and observables behave differently in Angular.