π‘ 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!
ββββ
Example 1: Basic concat usage with three observables
( StackBlitz )
// RxJS v6+import { of, concat } from 'rxjs';βconcat(of(1, 2, 3),// subscribed after first completesof(4, 5, 6),// subscribed after second completesof(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 )
// RxJS v6+import { concat, empty } from 'rxjs';import { delay, startWith } from 'rxjs/operators';β// elemsconst userMessage = document.getElementById('message');// helperconst 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 runconcat(interval(1000), of('This', 'Never', 'Runs'))// log: 1,2,3,4......subscribe(console.log);
βBattleship Gameβ
βSave Indicatorβ
βconcat π° - Official docs
βCombination operator: concat, startWithβ
π₯ π΅ - AndrΓ© Staltz
π Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.tsβ