Anguar Tips #4

Source: Dev.to

Introduction

Some tips for working with Angular – from a frontend developer (Part 4).
These tips assume you already have experience with Angular, so we won’t dive deep into RxJS fundamentals.

Processing an array sequentially with concatMap

When you have an array of values and need to perform an asynchronous action for each item, concatMap is the perfect choice. It processes each item sequentially, waiting for the previous asynchronous operation to complete before moving on to the next one.

import { from, of } from 'rxjs';
import { concatMap, tap, delay } from 'rxjs/operators';

const numbers = [1, 2, 3];

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2000)
    );
  })
);

With this code, each emission from the from source waits until the asynchronous operation inside concatMap completes before the next value is processed. The console.log statement runs after a 2‑second delay for each number.

Adding a final synchronous action

If you need to execute another synchronous action after all items have been processed, place the additional operator after the concatMap. For example, adding a tap directly after concatMap will run once for each emitted value:

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2_000)
    );
  }),
  tap(() => console.log('This goes here!'))
);

The output will be:

1
This goes here!
2
This goes here!
3
This goes here!

To ensure the final action runs only once, after all values have been processed, insert the last() operator before the final tap:

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2_000)
    );
  }),
  last(),
  tap(() => console.log('This goes here!'))
);

Now the console will show:

1
2
3
This goes here!

The "This goes here!" log is executed a single time, after all number logs have completed.

Conclusion

concatMap is extremely useful when you need to handle asynchronous operations sequentially. By combining it with operators like last, you can control when subsequent synchronous actions run.

That’s all for blog #4 about Angular tips – hope you found them helpful! See you in the next post.