title: Angular 2.0.1: simplifying a complex navigation component
body: <p>How do you keep a navigation component synchronized with a non-trivial application? For example, in <a href="https://angular.io/resources/live-examples/toh-6/ts/plnkr.html" rel="nofollow">Angular 2's simple Tour of Heroes application</a>, the <code>app.component.ts</code> has static (i.e. unchanging) declarative navigation:</p>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;nav&gt;
    &lt;a routerLink="/dashboard" routerLinkActive="active"&gt;Dashboard&lt;/a&gt;
    &lt;a routerLink="/heroes" routerLinkActive="active"&gt;Heroes&lt;/a&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>But in more complex applications, the navigation component is often dynamic. In my case the <code>nav</code> has a <em>sidenav</em>, a <em>back</em> button, component-specific <em>actions</em>, and user information; and, the <em>sidenav</em> and <em>actions</em> change depending on the role of the user. This is a fairly typical scenario -- think of Google Gmail, Inbox, Calendar, Docs, etc.</p>
  
  <p>Right now, my <code>nav</code> is in a single <code>my-header</code> component implemented with lots of <code>*ngIf</code> testing for the current component and role of user -- it's an ugly nightmare:</p>
  
  <pre><code>&lt;md-toolbar color="primary" class="fixed-toolbar"&gt;
    &lt;div *ngIf="isAuthenticated()"&gt;
  
      &lt;md-menu #mainmenu="mdMenu"&gt;
        &lt;a md-menu-item routerLink="/marketplaces" routerLinkActive="active"&gt;Marketplaces&lt;/a&gt;
        &lt;a md-menu-item routerLink="/people" routerLinkActive="active"&gt;People&lt;/a&gt;
        &lt;span *ngIf="isAdministrator()"&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
          &lt;a md-menu-item routerLink="/accounts" routerLinkActive="active"&gt;Accounts&lt;/a&gt;
        &lt;/span&gt;
      &lt;/md-menu&gt;
      &lt;button *ngIf="_navigation?.toolbar == 'default'" md-icon-button [md-menu-trigger-for]="mainmenu"&gt;
        &lt;md-icon&gt;menu&lt;/md-icon&gt;
      &lt;/button&gt;
  
      &lt;button *ngIf="_navigation?.toolbar == 'market'" md-icon-button
              (click)="closeAndReturn($event, 'marketplaces')"
              aria-label="Back to Marketplaces"&gt;
        &lt;md-icon&gt;close&lt;/md-icon&gt;
      &lt;/button&gt;
  
      &lt;button *ngIf="_navigation?.toolbar == 'person'" md-icon-button
              (click)="closeAndReturn($event, 'users')"
              aria-label="Back to People"&gt;
        &lt;md-icon&gt;close&lt;/md-icon&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;!-- ^^^ nightmare continues vvv --&gt;
  </code></pre>
  
  <p>The <code>my-header</code> component is simply included in the <code>app.component.html</code>:</p>
  
  <pre><code>&lt;my-header&gt;&lt;/my-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;my-footer&gt;&lt;/my-footer&gt;
  </code></pre>
  
  <p>But neither the <code>my-header</code> component nor the <code>my-footer</code> component are in the router tree so <code>my-header</code>'s injected <code>ActivatedRoute</code> is always the root node which means I can't even transition absolute <em>back</em> navigation:</p>
  
  <pre><code>(click)="closeAndReturn($event, 'marketplaces')"
  </code></pre>
  
  <p>to relative navigation:</p>
  
  <pre><code>(click)="closeAndReturn($event, '../')"
  </code></pre>
  
  <p>which means duplicating the router tree in this one component to stay synchronized -- this is obviously not the <em>Right Thing</em> to do...</p>
  
  <p>Any ideas on how do solve this, presumably super-common, challenge of keeping a navigation component in sync with a complex application?</p>