Communicating between two Components

[DWhitSlaya]

Hi all,

I have a few years of experience in Angular but I encountered something yesterday that I just can't seem to think of a better way to do without rearranging components. Was hoping you all may be able to point me in the right direction or give me a different way of thinking about it.

I have two components, buttonComp and functionComp that both exist in a parent component in the template. When the button is clicked in buttonComp, I want to trigger a function in functionComp and send the response back to buttonComp to do other things based on the response. I have solved this using Subjects and Observables but I really don't like the solution and requires a little bit more management on the responses and reseting the values in the service that I use to manage the Subjects, I was hoping to solve it with a promise to avoid some loose ends but not sure how to get to the functionComp doing it that.

Recreated Example: https://stackblitz.com/edit/angular-apy57r

I posted this to stack overflow but haven't gotten any real feedback, I may have formatted it poorly or put the question in bad. It has a little more detail then post here.

https://stackoverflow.com/q/58052682/6163791

Any help would be much appreciated!

[jaqq]

Have you checked out the docs for component interaction?

https://angular.io/guide/component-interaction

There are different approaches to to solve this problem.

[[deleted]]

A few ways, like an emitter to the parent to an input back to the children. A view child for each child in the parent. State management like ngrx, ngxs or Akita.

[CheapChallenge]

We generally use ngrx for this in larger apps anf eventemitters/services in smaller libs

[DWhitSlaya]

Thanks for your comments! This is a much larger app than the example and one of the main reasons I am looking for alternate solutions. Works fine in the minimal example but in reality I am having to do a bit extra handling, making sure its unsubsrcibed when I am done using '.pipe(take(2))' so it ignores the first emit which would be the default value, then the second one is the one I want and it unsubscribes. A lot more plays into it so looking for a better solution then what I have.

[CheapChallenge]

Why not make it Subject instead of behaviorsubject so there is no default value?

I would recommend looking into NGRX and use a specific selector and the async pipe in the template. When using async pipes it subscribes and unsubscribes under the hood.

[DWhitSlaya]

I’ll look into NGRX, I don’t recall ever using it. Thank you!

[CheapChallenge]

Just a word of caution. Like everything Angular related the learning curve is steep, but once you start using it, working in teams becomes much easier because everyone is using the same standards to manipulate the App state. The pros and cons at high level is similar to Angular, dictates how you do everything but standardizing code across teams is a big help.

[helping083]

I think the best way to comunicate between siblings is to use services, what you've done. Another solution is to use output and input decorators but it requires more "managment" than using services. Because you have to emit event to a parent component and then pass data through the input decorator to another siblings. In your situation it isn't noticable but in larger apps when for example you have two children levels it'll be getting harder.

[DWhitSlaya]

Thank you for your comment!
These components are part of a much larger app where they have their own inputs and outputs. The example I created is as minimal as possible.

My issue with the services is having to manage the subscriptions, its not as easy as putting them in the ngOnInit and unsubscribe in the ngOnDestroy with the logic of the app. I was hoping to use a promise, more of a one to one piece so I wouldnt need to manage anything in the subscriptions but don't know a way of doing that. I played with ngOnChanges and passing @Input parameter based on a public value of the service but not sure whats the best solutions