All you need to know about the concat operator in RxJS

The concat operator creates an output Observable which sequentially emits all values from given Observable and then moves on to the next.This operator first emits the values from the first observable, then the second observable and so on.

Signature

concat(...observables): Observable

The simplest example of the concat operator can be as follows.

const ob1$ = of( 1 , 2 , 3, 4 );
const ob2$ = interval( 1000 ).pipe(take( 4 ));
const result = concat(ob1$, ob2$);
result.subscribe(val => console.log(val));

Here we pass two observables and then pass the references of these observables to the concat operator and store the expression in result.Then we subscribe to the result and print the output.

The output for the above code will be;

// 1
// 2
// 3
// 4
// 0
// 1
// 2
// 3

We can see that the output is sequentially combined as per the sequence of the provided observables. If we reverse the sequence of the operands, we get reversed emitted values.

Following are some of the important points regarding the concat operator.

● concat subscribes to each observables one at a time in a sequence and merges their result.

● it will subscribe to the first observable and emit its values until it completes, then move to the next.This will be repeated till the concat runs out of observables.

● when the last observable is completed, the concat also completes.

● at one time only one observable can emit values.

● if one observable does not complete, then concat will never complete and the observables next to the incomplete observable will never be subscribed and not emit any value.

● if any observable emits an error, then the next observables never gets subscribed.

This is pretty much it you will need to start with the concat operator.