This post was originally published on my blog.

RxJS v7-alpha.1 was released a couple of weeks ago and while it’s exciting to see v7 slowing coming along, this release came with only one new feature. It’s an operator called concatWith.

In this short post I’m going to show you how this operator works.

Unfortunately the only available documentation about concatWith right now is in the source code. Here’s how it works:

Emits all of the values from the source observable, then, once it completes, subscribes to each observable source provided, one at a time, emitting all of their values, and not subscribing to the next one until it completes.

Let’s translate this to a simple example (StackBlitz):

import { of } from 'rxjs';
import { concatWith } from 'rxjs/operators';

const source = of('RxJS', 'is').pipe(concatWith(of('awesome!')));

source.subscribe(x => console.log(x));

// Output:
// RxJS
// is
// awesome!

If you’ve used the concat operator before this might look somehow familiar to you. This is not a coincidence. concatWith is actually not a completely new operator. It’s only meant to replace the concat operator which is currently marked as deprecated and will be removed in v8.

There’s one subtle difference between the two, though. concatWith only accepts inputs of type ObservableInput, whereas concat can also take a scheduler.

If you want to schedule the observable provided to concatWith, you need pass it to the scheduled function and also specify a scheduler. (StackBlitz)

Hope you learned something new. Happy RxJS-ing!

Thanks to Jan-Niklas Wortmann and Lars Gyrup Brink Nielsen for the review.