Passing Data between sibling components in Angular

Question

Above image depicts my Angular 2 application , Main component has two child components "FromComponent" and "ToComponent".

"FromComponent" displays a list of items with a checkbox beside each item.

When user selects/deselects an item in FromComponent , it should be added/removed from ToComponent list of items.

what is the best way to implement this in angular 2 ?

Answer 1

You would want to use a shared service that stores this information. Using observables as the storage mechanism would allow the To Component to subscribe to that subject and watch for any changes that the From component makes to that observable.

Check out more information on Subject and BehaviorSubject types in rxjs.

Answer 2

I have implemented that using a service as described here where parent-child communication is described. A service can connect a parent with all its children.