title: In Angular2 how do you change a sidebar based on the active route?
body: <p>I'm writing an SPA using Angular 2 (RC5) and Typescript.  I have a main navbar on top (using Bootstrap 4 Alpha 3), and a custom-designed sidebar.  Here's a pic:</p>
  
  <p><a href="https://i.stack.imgur.com/g4Km4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g4Km4.png" alt="enter image description here"></a></p>
  
  <p>The intention here is to navigate to a main "application" using the top navbar.  Currently I have 3 main apps mapped out - Tracker, Proboard and Equipment.  Once a main application has been activated, the links on the sidebar would change.  In the picture above, the sidebar is showing links for the 'Proboard' application.</p>
  
  <p>How can I change the contents of the sidebar based on the active route without having a bunch of '*ngIf' declarations in my HTML?</p>
  
  <p>I would like to have a JSON object in my code somewhere (perhaps retrieved from a backend API) that would list the links for each app.  Something like:</p>
  
  <pre><code>[
    { proboard: [
      { label: 'Home', link: '/proboard', icon: 'fa-home'},
      { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'},
      { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ]
    },
    { tracker: [...] },
    { equipment: [...] }
  ]
  </code></pre>
  
  <p>Then when the user would navigate to one of the links on the top navbar, the sidebar would be populated with the contents in the array above, using an <code>NgFor</code> in the HTML.</p>
  
  <p>Any suggestions or links would be appreciated.</p>