Learn RxJS
Search…
concat
signature: concat(observables: ...*): Observable
concat(observables: ...*): ObservableSubscribe to observables in order as previous completes
💡 You can think of concat like a line at a ATM, the next transaction (subscription) cannot start until the previous completes!
Examples
Example 1: Basic concat usage with three observables
1
// RxJS v6+
2
import { of, concat } from 'rxjs';
3
4
concat(
5
of(1, 2, 3),
6
// subscribed after first completes
7
of(4, 5, 6),
8
// subscribed after second completes
9
of(7, 8, 9)
10
)
11
// log: 1, 2, 3, 4, 5, 6, 7, 8, 9
12
.subscribe(console.log);
Copied!
Example 2: Display message using concat with delayed observables
Could not load image
Example 2
1
// RxJS v6+
2
import { concat, empty } from 'rxjs';
3
import { delay, startWith } from 'rxjs/operators';
4
5
// elems
6
const userMessage = document.getElementById('message');
7
// helper
8
const delayedMessage = (message, delayedTime = 1000) => {
9
return empty().pipe(startWith(message), delay(delayedTime));
10
};
11
12
concat(
13
delayedMessage('Get Ready!'),
14
delayedMessage(3),
15
delayedMessage(2),
16
delayedMessage(1),
17
delayedMessage('Go!'),
18
delayedMessage('', 2000)
19
).subscribe((message: any) => (userMessage.innerHTML = message));
Copied!
Example 3: (Warning!) concat with source that does not complete
1
// RxJS v6+
2
import { interval, of, concat } from 'rxjs';
3
4
// when source never completes, any subsequent observables never run
5
concat(interval(1000), of('This', 'Never', 'Runs'))
6
// log: 1,2,3,4.....
7
.subscribe(console.log);
Copied!
Related Recipes
Additional Resources
- 🎥 💵 - André Staltz
Last modified 9mo ago