title: angular2 how to hide parent router links
body: <p>In angular2, I need to find a way to hide parent router links. I must show ONLY the lowest-level information - NOT the routing-link tree that brought me to this level.</p>
  
  <p>I'm using Angular 2.0 final.
  I'm not using angular-cli, and I can't switch to it.
  All my code is contained in this plunk: <a href="http://plnkr.co/edit/EdLY62A8GfVimEn48HaA" rel="nofollow">http://plnkr.co/edit/EdLY62A8GfVimEn48HaA</a></p>
  
  <p>After the user clicks on the 'About' routerLink, I must display ONLY 
  "About Contents", and HIDE the 'Home' and 'About" routerLinks.</p>
  
  <p>The same requirement holds for any child routes that may exist for 'About'. At any point in the routing tree, I must show ONLY the choices for that level - all the parent routing links that brought me to this point MUST NOT be shown.</p>
  
  <p><strong>App component:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'demo-app',
    template: `
     &lt;a [routerLink]="['/']"&gt;Home&lt;/a&gt;
     &lt;a [routerLink]="['/about']"&gt;About&lt;/a&gt;
     &lt;div class="outer-outlet"&gt;
       &lt;router-outlet&gt;&lt;/router-outlet&gt;
     &lt;/div&gt;
    `
  })
  export class AppComponent { }</code></pre>
  </div>
  </div>
  </p>