# 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](https://chasethestar.gitbook.io/ko.learn-rxjs/rxjs/operators/combination/merge) instead!

***

[![Ultimate RxJS](https://drive.google.com/uc?export=view\&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz)](https://ultimatecourses.com/courses/rxjs?ref=4)

### Examples

**Example 1: Basic concat usage with three observables**

( [StackBlitz](https://stackblitz.com/edit/typescript-ks8chl?file=index.ts\&devtoolsheight=100) )

```js
// 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](https://stackblitz.com/edit/typescript-jtzuaa?file=index.ts) )

![Example 2](https://drive.google.com/uc?export=view\&id=1fKsYUKXkSWEDLdii-5rmOAgqy6sUGNjl)

```js
// 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](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts\&devtoolsheight=100) )

```js
// 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](https://chasethestar.gitbook.io/ko.learn-rxjs/rxjs/recipes/battleship-game)
* [Save Indicator](https://chasethestar.gitbook.io/ko.learn-rxjs/rxjs/recipes/save-indicator)

### Additional Resources

* [concat](https://rxjs.dev/api/index/function/concat) 📰 - Official docs
* [concat](https://indepth.dev/reference/rxjs/operators/concat) - In Depth Dev Reference
* [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) 🎥 💵 - André Staltz

***

> 📁 Source Code: <https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concat.ts>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chasethestar.gitbook.io/ko.learn-rxjs/rxjs/operators/combination/concat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.