Demo:  concatMapTo

The concatMapTo is useful in creating a task for each source item and executing them strictly in sequence; completing each task before starting the next.

concatMapTo uses mapTo instead of map operator, hence, it can only map to an observable(or the task) which is independent of the input value. Otherwise, both the operators work the same way.

const source=timer(500,1000).pipe(take(3));

//1. Each input from source maps to this counting task
const countTill3Task = timer(300,1000).pipe(take(4);

//2. concatMapTo will run the mapped tasks strictly one after the other
const mapToAndConcat = concatMapTo( countTill3Task );

const output = source.pipe(mapToAndConcat).subscribe(v=>console.log(v))
What is happening ?

concat Map To is the same as concat Map, the only difference being on the mapping part.

concat MapTo uses map To instead of map operator, hence, it can only map to an observable or the task which is independent of the input value.

Coming to our demo on concat Map To, we mapping to the same task as in concat Map demo:

  • As long as the mapped task is independent of the input value, both the operators are the same.
  • As we can see, each count till 3 task starts only after it's previous one is complete. Moreover, because each tasks run strictly one after the other in order, their output looks concatinated.