concat

signature: concat(observables: ...*): Observable
Subscribe 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!
💡 If throughput, not order, is a primary concern, try merge instead!
​​​​
Examples
Example 1: Basic concat usage with three observables
( StackBlitz )
// RxJS v6+
import { of, concat } from 'rxjs';
​
concat(
  of(1, 2, 3),
  // subscribed after first completes
  of(4, 5, 6),
  // subscribed after second completes
  of(7, 8, 9)
)
  // log: 1, 2, 3, 4, 5, 6, 7, 8, 9
  .subscribe(console.log);
Example 2: Display message using concat with delayed observables
( StackBlitz )
Example 2
// RxJS v6+
import { concat, empty } from 'rxjs';
import { delay, startWith } from 'rxjs/operators';
​
// elems
const userMessage = document.getElementById('message');
// helper
const delayedMessage = (message, delayedTime = 1000) => {
  return empty().pipe(startWith(message), delay(delayedTime));
};
​
concat(
  delayedMessage('Get Ready!'),
  delayedMessage(3),
  delayedMessage(2),
  delayedMessage(1),
  delayedMessage('Go!'),
  delayedMessage('', 2000)
).subscribe((message: any) => (userMessage.innerHTML = message));
Example 3: (Warning!) concat with source that does not complete
( StackBlitz )
// RxJS v6+
import { interval, of, concat } from 'rxjs';
​
// when source never completes, any subsequent observables never run
concat(interval(1000), of('This', 'Never', 'Runs'))
  // log: 1,2,3,4.....
  .subscribe(console.log);
Related Recipes
​Battleship Game​
​Save Indicator​
Additional Resources
​concat 📰 - Official docs
​concat - In Depth Dev Reference
​Combination operator: concat, startWith​
🎥 💵 - André Staltz
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts​
combineLatest
concatAll
Last updated 1 month ago