Concat

function concat<T>(...sources: Source<T>[]): Source<T>

           a:  ---1--2--3--|
           b:  ---x--y--z--|
concat(a, b):  ---1--2--3-----x--y--z--|

Concatenates streams, observing and emitting from the second source after the first source ends (and so on). For example, in the code below, input from given <input/> will be displayed on the <div/> after the countdown finishes:

HTML Code

<input type="text" placeholder="Type something ..." />
<div></div>

import { pipe, event, interval, take,
  concat, observe, tap, map } from 'streamlets'

const $input = document.querySelector('input')
const $div = document.querySelector('div')

// count down from 10
const countdown = pipe(
  interval(1000),
  take(10),
  map((x) => 10 - x)
)

// also get the input from `$input`
const input = pipe(
  event($input, 'input'),
  map(() => $input.value)
)

// first display the countdown, then display
// the input value after the countdown has finished.
pipe(
  concat(countdown, input),
  tap((x) => ($div.textContent = x)),
  observe
)

💡 If one of the sources ends due to an error, the whole stream will be closed.

👉 See also

• append()
• prepend()

---

📖 READ NEXT: Sources

---