title: Hide root component html based on current active route
body: <p>Below image depicts my SPA developed using Angular 2.</p>
  
  <p><a href="https://i.stack.imgur.com/tYTxk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tYTxk.png" alt="enter image description here"></a>
  The menu links shown in the top are part of root component , and below is the html of root component.</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" [routerLink]="['']" routerLinkActive="active" &gt;eShop Admin&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li &gt;&lt;a [routerLink]="['']"&gt;Home&lt;/a&gt;&lt;/li&gt;      
  
        &lt;li&gt;&lt;a [routerLink]="['./categories']" routerLinkActive="active"&gt;Categories&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a [routerLink]="['./products']" routerLinkActive="active"&gt;Products&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a [routerLink]="['./about']" routerLinkActive="active"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/li&gt;
      &lt;/ul&gt;      
  
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Now my requirement is if the current active route is "Login" , then the menu links in the root component should not be displayed.</p>
  
  <p>Any idea what is the best way to implement this ? </p>