RxJS - concat and merge two observables

1
votes

I've got two Observables

public readonly availableTags$ = this.tagSandbox.observeTags()
public readonly jobs$ = this.jobSandbox.observeJobsAfterFiltering()

which I use as Input values for an Angular component with an async pipe.

I'd like to transform these two observable in a single one and "merge" their values in single object.

{
   availableTags: Tag[],
   jobs: Job[]
}

However, the value from jobs$ should be fetched only after availableTags$ has emitted its value. Is that possible?

All this is to avoid a "double reload" of the Input properties.

1
rxjs

1 Answers

3
votes

You can use concatMap for this (mergeMap will work as well) and then map the response from the second call together with the result of the first call into a single object:

availableTags$.pipe(
  concatMap(availableTags => jobs$.pipe(
    map(jobs => ({ availableTags, jobs })),
  ))
);