title: Angular2: Display different "toolbar" components depending on main navigation
body: <p>This is a conceptional question on how to implement the required functionality the "right" way with Angular 2.</p>
  
  <p>My application has a navigation menu, a toolbar, and a content area. The latter contains the primary <code>&lt;router-outlet&gt;</code> and displays the different views like list and details.</p>
  
  <p>What I want to achieve is that the toolbar is displaying different components, depending on the component/view that is rendered in the content area. For example, the list component needs a search control in the toolbar, while the details component needs a save button.</p>
  
  <p><strong>A)</strong> My first attempt was to add another (named) <code>&lt;router-outlet&gt;</code> to the toolbar and display the toolbar components based on static routes. What feels wrong about this:</p>
  
  <ol>
  <li>The static content-toolbar relation is coupled too loosely for my taste.</li>
  <li>The relation is visible (and changeable) in the URL.</li>
  <li>The toolbar outlet keeps this path even if the user navigates away.</li>
  </ol>
  
  <p><strong>B)</strong> My second attempt was to navigate imperatively to the toolbar components (also using the named toolbar outlet) in the main view component's <code>ngOnInit</code>, which couples it more tightly. What smells bad:</p>
  
  <ol>
  <li>A2</li>
  <li>A3, to prevent this I could "clear" the toolbar outlet on <code>ngOnDestroy</code>, but I haven't found out how.</li>
  </ol>
  
  <p><strong>C)</strong> Giving the router a last chance, since I found out that this kind-of works:</p>
  
  <pre class="lang-js prettyprint-override"><code>const ROUTES: Routes = [
      {path: "buildings", children: [
          {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
          {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
          {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
      ]}
  ];
  </code></pre>
  
  <p>The idea is that the router would pick the matching path <em>per outlet</em>. But (nooo, it could have been so easy) unfortunately, this doesn't work:</p>
  
  <pre class="lang-js prettyprint-override"><code>const ROUTES: Routes = [
      {path: "buildings", children: [
          {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
          {path: "list", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
          {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
      ]}
  ];
  </code></pre>
  
  <p>It appearently (and maybe accidentially) only works with an empty path. Why, oh why?</p>
  
  <p><strong>D)</strong> A complete different strategy would be to rework my component hierarchy, so that every main view component contains a appropriate toolbar, and use <a href="https://toddmotto.com/transclusion-in-angular-2-with-ng-content#multi-slot-content-projection" rel="noreferrer">multi-slot content projection</a>. Haven't tried this, but I'm afraid running into problems with multiple instances of the toolbar.</p>
  
  <p>As sometimes, this seems to be a common use case, and I'm wondering how Angular 2 experts would solve this. Any ideas?</p>