title: unable to hide header and footer from login page using angular
body: <p>here my issue i unable to hide the header and footer from the login page . here i am having a common header and footer in app.html and login page &amp; home page. With out login it does not have to show the nav but still i am getting the nav before authentication</p>
  
  <p>below is my code</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey"&gt;
      &lt;div class="container"&gt;
          &lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"&gt;
  
              &lt;ul class="nav navbar-nav navbar-right landing-nav-text ul-right"&gt;
                  &lt;li class="active"&gt;&lt;a href="#about"&gt;About &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#info"&gt;info&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#demo"&gt;Demo&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#demo1"&gt;Demo1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#demo2"&gt;Demo2&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="#demo3"&gt;Demo3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
       &lt;a (click)="Logout()" class="logout"&gt;
          Logout
      &lt;/a&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;router-outlet&gt;
  
  
  &lt;div class="footer"&gt;
      &lt;div class="main_content"&gt;
  
          &lt;div class="footer_links_end"&gt;
            &lt;p&gt;This is footer&lt;/p&gt;
  
              &lt;p&gt;
                  &lt;a href="https://twitter.com"&gt;Twitter&lt;/a&gt;
                  &lt;a href="https://www.linkedin.com"&gt;Linkedin&lt;/a&gt;
  
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>please check this stack for issue </p>