rxjs how i can force one stream wait to another one and then continue

Problem:

I’m using Angular and have two streams in my component:

First stream:

Makes an HTTP request to fetch some data. After the data is fetched, I need to initialize two valueChanges for two controls. Every time a user changes these controls, I trigger logic based on the data fetched from the HTTP request. Second stream:

Makes another HTTP request to fetch some data. This data is used to patch values to my entire formGroup. I want to ensure that this patch happens only after the first stream completes, because I need to initialize the valueChanges first. Requirements:

Sequence of events: The first HTTP request must complete before initializing the valueChanges for the controls. The second HTTP request should only fire after the first HTTP request completes and the form controls are initialized. Any changes made by the user to the controls (from the first stream) should trigger the associated logic, but I want to ignore the second stream, as it only runs during the initialization phase. Challenges:

I need to ensure the second HTTP request for patching values happens only once and does not trigger further, even when the user interacts with the form controls after the initial setup. The second stream should be independent of the user’s changes to the form controls. How can I manage the flow of these streams to meet these requirements?

What I’ve Tried:

First Stream:

I start with an observable from the HTTP request (I use a store, but that’s not important here). I use switchMap to handle the data, then initialize the valueChanges for two controls, and apply some logic with tap. After that, I merge them together and return the result. This part works fine, but I face challenges with the second stream. Second Stream:

When I try to combine the streams, I run into issues. Here are some approaches I considered and why they didn’t work for my scenario:

Using switchMap: If I start with the first stream and then switchMap to the second, the problem is that any change to the first stream will re-trigger the second, which I don’t want. I need to make sure the second stream fires only once during the initialization phase.

Using concatMap: This approach doesn’t work for me because it waits for the second stream to complete before triggering the first stream. This means the user’s valueChanges on the first stream won’t trigger because the second stream is waiting to complete first.

Using mergeMap: This doesn't work either because it doesn’t respect the order of events. It doesn’t wait for the first stream to finish before the second one starts, which isn’t what I need.

What I Need:

I need to wait for the first HTTP request to complete, initialize the form controls, and then trigger the second stream to patch the form values. The second stream should only run once when the component is initialized, not every time the user changes a value on the form controls. The first stream needs to handle any changes to the form controls immediately and execute the logic associated with those changes.

I’ve created a StackBlitz example to demonstrate the issue. As you can see, I expect the order to be:

1. 
   stream1$
   
   
2. 
   stream2$
   

Continue reading...