Angular2 passing data between two child components

Question

I have a component with two childcomponents. I show one or the other with using the router with the router-outlet.

I want to take form data inserted in the first child, and use it in the other child which I route to upon submitting the form.

I suspect I need to use @input or @output but I can't find any documentation on how to do it when using the router-outlet.

My current other solution is to save the data in the localstorage when submitting the form in the first child and calling it in the second child. Doesn't seem ideal.

Answer 1

You could use @ngrx/store to store data, then inject those into your route components. See the examples there for implementation.

Answer 2

You could pass the data via a service. If you create a service, and set the data in child A, you could then retrieve it from child B. The only catch is you need to set this service you create as a provider for the parent class, and not for the child components.

Here is an example of this Angular 2 passing object via route params possible?