1. Observable
An Observable is a stream of data that you can subscribe to. It’s cold by default, meaning it doesn’t emit values until someone subscribes.
Example:
import { Observable } from 'rxjs';
const observable = new Observable<number>((subscriber) => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete(); // completes the stream
});
observable.subscribe({
next: (value) => console.log('Received:', value),
complete: () => console.log('Observable completed'),
});
Output:
Received: 1
Received: 2
Received: 3
Observable completed
2. Subject
A Subject is like an Observable, but it’s multicasting—it can emit values to multiple subscribers. Unlike normal Observables, a Subject is hot, meaning it can start emitting values immediately, and any subscriber will get current or future values.
Example:
import { Subject } from 'rxjs';
const subject = new Subject<number>();
subject.subscribe({
next: (v) => console.log('Subscriber 1:', v)
});
subject.next(1);
subject.next(2);
subject.subscribe({
next: (v) => console.log('Subscriber 2:', v)
});
subject.next(3);
Output:
Subscriber 1: 1
Subscriber 1: 2
Subscriber 1: 3
Subscriber 2: 3
Notice that Subscriber 2 only gets 3, because the previous values were emitted before it subscribed.
3. BehaviorSubject
If you want new subscribers to get the last emitted value immediately, use BehaviorSubject:
import { BehaviorSubject } from 'rxjs';
const behaviorSubject = new BehaviorSubject<number>(0); // initial value
behaviorSubject.subscribe({
next: (v) => console.log('Subscriber 1:', v)
});
behaviorSubject.next(1);
behaviorSubject.next(2);
behaviorSubject.subscribe({
next: (v) => console.log('Subscriber 2:', v)
});
behaviorSubject.next(3);
Output:
Subscriber 1: 0
Subscriber 1: 1
Subscriber 1: 2
Subscriber 2: 2
Subscriber 1: 3
Subscriber 2: 3
✅ Key Points:
- Observable: Single subscriber, cold by default.
- Subject: Multicast to multiple subscribers, hot by default.
- BehaviorSubject: Like Subject but stores latest value for new subscribers.
- ReplaySubject: Stores multiple previous values for new subscribers.
- AsyncSubject: Emits last value only when completed.