unable to hide header and footer from login page using angular

Issue

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 & home page. With out login it does not have to show the nav but still i am getting the nav before authentication

below is my code

<nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">

            <ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
                <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#info">info</a></li>
                <li><a href="#demo">Demo</a></li>
                 <li><a href="#demo1">Demo1</a></li>
                  <li><a href="#demo2">Demo2</a></li>
                   <li><a href="#demo3">Demo3</a></li>
            </ul>
        </div>
    </div>
     <a (click)="Logout()" class="logout">
        Logout
    </a>
</nav>
<router-outlet><router-outlet>


<div class="footer">
    <div class="main_content">

        <div class="footer_links_end">
          <p>This is footer</p>

            <p>
                <a href="https://twitter.com">Twitter</a>
                <a href="https://www.linkedin.com">Linkedin</a>

            </p>
        </div>

    </div>
</div>

please check this stack for issue

Solution

Use ngIf:

for, that you have to use Router from @angular/router.

Component.ts:

import { Router }  from "@angular/router";
...

constructor(public router: Router){} // note you have to use Public because you are using it in html file too.

Component.html:

<nav *ngIf="router.url !== '/login' && router.url !== '/signup'"> // or maybe only 'login'
</nav>

Note: If you are using different components for the header (<app-header>) and footer(<app-footer>) you can use *ngIf with them too..

Answered By - deepchudasama