I am trying to share my Reactive Forms across many components, and I am running into an issue when trying to accomplish that via routing. The error I am receiving: 'Can't bind to 'group' since it isn't a known property of 'router-outlet'
Here is the router:
<router-outlet [group]="turnoverService.turnoverForm"></router-outlet>Is there a way to accomplish passing Reactive Forms to child components with routing?
Using the binding syntax in Angular ([]) will only work if the component has an @Input property with the same name as the binding. router-outlets don't have this. Plus, the routed component is added as a sibling to <router-outlet>, not a child.
The easiest way (and best practice IMO) is to just use a shared service that has the data that is then injected into the child components. It looks like you have a turnoverService, so the child components would need to grab this in their constructor.
More info: Passing data into "router-outlet" child components (angular 2)
EDIT: Another way to do this would be to use the resolve method on the route definitions themselves. The resolve function will fire when the route is activated, but the route itself will not actually load until the resolve function successfully completes. The routed component will then have access to the resolve data via the Injector. This would work if you already have the data or need to do some logic to get it, but probably isn't the best solution if the resolve method is making asynchronous AJAX calls.
More info on resolve in this excellent article (the Angular docs themselves are lacking here).
