Learn RxJS
Search…
Learn RxJS
Introduction
Learn RxJS
Operators
Subjects
AsyncSubject
BehaviorSubject
ReplaySubject
Subject
Recipes
Concepts
Powered By GitBook
Subjects
A Subject is a special type of Observable which shares a single execution path among observers.
You can think of this as a single speaker talking at a microphone in a room full of people. Their message (the subject) is being delivered to many (multicast) people (the observers) at once. This is the basis of multicasting. Typical observables would be comparable to a 1 on 1 conversation.
There are 4 variants of subjects:
    Subject - No initial value or replay behavior.
    AsyncSubject - Emits latest value to observers upon completion.
    BehaviorSubject - Requires an initial value and emits its current value (last emitted item) to new subscribers.
    ReplaySubject - Emits specified number of last emitted values (a replay) to new subscribers.

Contents

Subjects comparison

( Stackblitz )
1
/*
2
s1 n(r) n(x) s2 n(j) c n(s)
3
Subject
4
s1 ^-----r------x--------------j------|----------
5
s2 ---------------------^------j------|----------
6
AsyncSubject
7
s1 ^----------------------------------j|---------
8
s2 ---------------------^-------------j|---------
9
BehaviorSubject
10
s1 ^a----r------x--------------j------|----------
11
s2 ---------------------^x-----j------|----------
12
ReplaySubject
13
s1 ^-----r------x--------------j------|----------
14
s2 ---------------------^r-x---j------|----------
15
*/
16
​
17
// RxJS v6+
18
import { Subject, AsyncSubject, BehaviorSubject, ReplaySubject } from 'rxjs';
19
​
20
const subject = new Subject();
21
const asyncSubject = new AsyncSubject();
22
const behaviorSubject = new BehaviorSubject('a');
23
const replaySubject = new ReplaySubject(2);
24
​
25
const subjects = [subject, asyncSubject, behaviorSubject, replaySubject];
26
const log = subjectType => e => console.log(`${subjectType}: ${e}`);
27
​
28
console.log('SUBSCRIBE 1');
29
subject.subscribe(log('s1 subject'));
30
asyncSubject.subscribe(log('s1 asyncSubject'));
31
behaviorSubject.subscribe(log('s1 behaviorSubject'));
32
replaySubject.subscribe(log('s1 replaySubject'));
33
​
34
console.log('\nNEXT(r)');
35
subjects.forEach(o => o.next('r'));
36
​
37
console.log('\nNEXT(x)');
38
subjects.forEach(o => o.next('x'));
39
​
40
console.log('\nSUBSCRIBE 2');
41
subject.subscribe(log('s2 subject'));
42
asyncSubject.subscribe(log('s2 asyncSubject'));
43
behaviorSubject.subscribe(log('s2 behaviorSubject'));
44
replaySubject.subscribe(log('s2 replaySubject'));
45
​
46
console.log('\nNEXT(j)');
47
subjects.forEach(o => o.next('j'));
48
​
49
console.log('\nCOMPLETE');
50
subjects.forEach(o => o.complete());
51
​
52
console.log('\nNEXT(s)');
53
subjects.forEach(o => o.next('s'));
54
​
55
/*
56
OUTPUT:
57
​
58
SUBSCRIBE 1
59
s1 behaviorSubject: a
60
​
61
NEXT(r)
62
s1 subject: r
63
s1 behaviorSubject: r
64
s1 replaySubject: r
65
​
66
NEXT(x)
67
s1 subject: x
68
s1 behaviorSubject: x
69
s1 replaySubject: x
70
​
71
SUBSCRIBE 2
72
s2 behaviorSubject: x
73
s2 replaySubject: r
74
s2 replaySubject: x
75
​
76
NEXT(j)
77
s1 subject: j
78
s2 subject: j
79
s1 behaviorSubject: j
80
s2 behaviorSubject: j
81
s1 replaySubject: j
82
s2 replaySubject: j
83
​
84
COMPLETE
85
s1 asyncSubject: j
86
s2 asyncSubject: j
87
​
88
NEXT(s)
89
*/
Copied!

Additional Resources

Previous
Full Listing
Next
AsyncSubject
Last modified 1yr ago
Copy link
Contents
Contents
Subjects comparison
Additional Resources