RxJS Operator: concatMap

The concatMap RxJS Operator is a higher-order mapping operator that processes each emitted value in order and waits for its inner Observable to complete before processing the next item.

For example:

products$ = this.categorySelected$
  .pipe(
       concatMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

In the above code, the concatMap will perform the HTTP get and wait for the response before processing the next item emitted from this.categorySelected$.

How Does concatMap Work?

We can think of the concatMap like a relay race: the next runner can't start until the prior runner completes. And the runners cannot run out of sequence.

Let's look at an Example

In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above:

The concatMap issues a get request for category 2,
waits for the response,
then issues a get request for category 3,
waits for the response,
then issues a get request for category 1,
and waits for the response.

For this specific example, where the user can change their mind on the selected category, using concatMap doesn't make sense. It takes too long for each selection to be processed and returns results that are no longer needed.