title: Structuring Angular 2 application with interdependent components
body: <p>I'am trying to find a good structure for an Angular 2 application which has something like interdependent components.</p>
  
  <p>Here's the basic idea of the problem:
  There should be side navigation menu component and a content area which should contain the router-outlet. For some routes the side component should contain an <strong>additional component for navigation</strong> (e.g. a list of items for quick access where in the main content area is the "detail view").</p>
  
  <pre><code>Top level template structure:
  
  &lt;sidenav&gt;
    &lt;featureA-nav-fragment&gt;&lt;/featureA-nav-fragment&gt;
  &lt;/sidenav&gt;
  &lt;router-outlet&gt;
    &lt;!-- featureA component --&gt;
  &lt;/router-outlet&gt;
  </code></pre>
  
  <p>The menu should be a component which is indepentend from any other component or feature area and should not know about the additional navigation component but it should wrap this component. </p>
  
  <p>One way to implement would be to define just the  as top level component and in every screen which is defined by a route provide the side menu in the HTML-template. It seems to me that this is bad design cause parts of the HTML-code are duplicated.</p>
  
  <p>An other alternative would be to create a switch on the active route in the menu component and include the correct navigation fragment there but this spreads the logic of the route (screen) into several components which seems to be an even worse design to me.</p>
  
  <p>Using a named router-outlet for the navigation fragment isn't the right way to go neither since the components are not independently displayed from each other but always together. Modifying the route manually (clearing the nav fragment part) would break the design.</p>
  
  <p>I didn't managed to find a good design for such a use case in the angular documentation yet. Am I missing something here?</p>