0

I have built an Angular(14) app where I need to store some data in a DB. So I have a component with a button, I want to press this button and do stuff in three different components, when they are all done I want to send the data to the backend.

I want to have it similar to this, Button will trigger 4 functions and when all is done servicefile will send to backend

I tried to have three subject where each child passed along the data but that did not work since I do not know what of the three children that will be done first. I think it will work if I let the button trigger child 1 that trigger child 2 that trigger child 3 and then from child three trigger the menthod that will send the data to backend. But that will be ugly.

I did managed to make it work with emits from each child but they are very nested so I did not like the solution.

I have tried to use the async/await but can't find any sugestions on google with this senario, all the await/async seams to be used when the http request will be used.

I would really like the async/await method to work. Do any of you have a nice and clean suggestion or do you have a example where async/await is not used with the http request?

Improve this question
3
  • Ok. It' important that every service do its work and after the service call the backend, right? Second: It's the order important (first child 1, then 2, then 3)? Commented Dec 17, 2022 at 20:17
  • Hi, First, yes every child will have to do it's work and then the api request. Second, No, the order is not important. In my scenario I are going to store information about different network sites. The agant that uses the site should be able to add a new site, so the parent hold inputs about contacts and street and stuff that do not need to be checkt. The child component handel what vlans and vpns that are used on the site. But, the IPs of the sites should be unique. Therefor the child checks witch backend if it's unicue, and if it is then the app should send the site to the backend. Commented Dec 18, 2022 at 14:30
  • Doesn't sound like a real case to me as eventually you still reach the backend, which you already did in the children components. My 2cent is you move your work in children components and even that service all to the backend, 1 round trip to backend only. Commented Dec 18, 2022 at 20:37

1 Answer 1

Reset to default
0

I suppose that there might be a combination of rxjs operators that could handle this, but I can't think of one.

I think that the most straightforward thing would be to the component with the button kick off processing in all three 'children', and to have each of those children have a subject that emits it's result.

Then, have the service subscribe to the 3 children's observables, store the value of each of the observables, and when each value arrives, check whether all 3 are present. When the third value shows up, do the api call, then set all 3 values to null, wait for all three to be non-null again. Rinse and repeat.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Ye, I think I will try that. I tried use joinFork, so parent trigger the functions in the childs and the func in the service. Then I have a joinFork that awaited promisecalls from the childs. The problem was that I was using subjects, so I have to add subject.complete() since the joinFork only allow observers that complets. But then I could not press the button again. So, I will try your solution and write back.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.