concatAll

Search…
concatAll
signature: concatAll(): Observable
Collect observables and subscribe to next when previous completes.
⚠ Be wary of backpressure when the source emits at a faster pace than inner observables complete!
💡 In many cases you can use concatMap as a single operator instead!
​​
​​
Examples
( example tests )
Example 1: concatAll with observable
( StackBlitz | jsBin | jsFiddle )
1
// RxJS v6+
2
import { map, concatAll } from 'rxjs/operators';
3
import { of, interval } from 'rxjs';
4
​
5
//emit a value every 2 seconds
6
const source = interval(2000);
7
const example = source.pipe(
8
  //for demonstration, add 10 to and return as observable
9
  map(val => of(val + 10)),
10
  //merge values from inner observable
11
  concatAll()
12
);
13
//output: 'Example with Basic Observable 10', 'Example with Basic Observable 11'...
14
const subscribe = example.subscribe(val =>
15
  console.log('Example with Basic Observable:', val)
16
);
Copied!
Example 2: concatAll with promise
( StackBlitz | jsBin | jsFiddle )
1
// RxJS v6+
2
import { map, concatAll } from 'rxjs/operators';
3
import { interval } from 'rxjs';
4
​
5
//create and resolve basic promise
6
const samplePromise = val => new Promise(resolve => resolve(val));
7
//emit a value every 2 seconds
8
const source = interval(2000);
9
​
10
const example = source.pipe(
11
  map(val => samplePromise(val)),
12
  //merge values from resolved promise
13
  concatAll()
14
);
15
//output: 'Example with Promise 0', 'Example with Promise 1'...
16
const subscribe = example.subscribe(val =>
17
  console.log('Example with Promise:', val)
18
);
Copied!
Example 3: Delay while inner observables complete
( StackBlitz | jsBin | jsFiddle )
1
// RxJS v6+
2
import { take, concatAll } from 'rxjs/operators';
3
import { interval, of } from 'rxjs';
4
​
5
const obs1 = interval(1000).pipe(take(5));
6
const obs2 = interval(500).pipe(take(2));
7
const obs3 = interval(2000).pipe(take(1));
8
//emit three observables
9
const source = of(obs1, obs2, obs3);
10
//subscribe to each inner observable in order when previous completes
11
const example = source.pipe(concatAll());
12
/*
13
  output: 0,1,2,3,4,0,1,0
14
  How it works...
15
  Subscribes to each inner observable and emit values, when complete subscribe to next
16
  obs1: 0,1,2,3,4 (complete)
17
  obs2: 0,1 (complete)
18
  obs3: 0 (complete)
19
*/
20
​
21
const subscribe = example.subscribe(val => console.log(val));
Copied!
Related Recipes
​Progress Bar​
Additional Resources
​concatAll 📰 - Official docs
​concatAll - In Depth Dev Reference
​Flatten a higher order observable with concatAll in RxJS​
🎥 💵 - André Staltz
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatAll.ts​
concat
endWith
Last modified 9mo ago
Copy link
Contents
Collect observables and subscribe to next when previous completes.
Examples
Related Recipes
Additional Resources