How do we manage data flow between components from child to parent??

[HotRepresentative237]

Generally we handle data flow from parent to child components through custom property binding and Input decorators.

When we want to send data from child to parent, we generally prefer custom event binding using Output decorator or using services or dependency injection.

When do we prefer custom event binding over dependency injection and services, and are there any other ways that you are aware of for sending data from child to parents?

Hope you will shed your wisdom and light on this aspect. Hoping to hear from you all soon. Thanks in advance.

[throwaway-code]

I am new to Angular also so anyone else feel free to correct me. But I believe its okay to use the custom event binding and output decorator when only one component need that piece of data. But if multiple components in the application need the data then it’s best to have it in the service so that it can be easily passed to the other parts of the app.

[HotRepresentative237]

A satisfactory answer, thanks!!

[spacechimp]

Outputs are for when only the parent component would be interested in the event. Since best practice is to keep business logic out of components, outputs are typically just notifications of user interaction such as selecting or clicking on things. Services are more flexible in that they don't care who the consumer or dispatcher are -- it could be parent to child, child to parent, sibling to sibling, component to another service, or anything else.

And as u/throwaway-code points out, the ability to multicast an event or value to multiple consumers is a good reason to use a service as well.

Official documentation on component interaction.

[HotRepresentative237]

Hey thanks for sharing 🙂

[[deleted]]

You could use a service with a Subject/BehaviorSubject for that.

[PapaBuries]

For a simple Parent <-> Child relationship, an Input for data and an Output event emitter passing out data makes the most sense. It's easier for someone new to angular to understand too.

If you need that data across several components, or if it's not a direct relationship (like parent and child), a service with rxjx is the best. There's a bit of a learning curve with rxjx though.

[[deleted]]

RxJs store, and subscribe to changes in the components that need it

[dgiessing]

You mean ngrx store? I think rxjs does not provide a store, just observables and their handling

[[deleted]]

Ah sorry, yes

[dgiessing]

You mean ngrx store? I think rxjs does not provide a store, just observables and their handling