unable to hide header and footer from login page using angular

Question

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

you need hide logout button from the nav bar or complete navbar? — ram12393, Dec 20 '18 at 06:12
https://stackoverflow.com/questions/36665094/angular2-using-routes-how-to-display-the-navigation-bar-after-successfully-log this can be helpful — Just code, Dec 20 '18 at 06:23
Best way of doing this is making a layout component and using child routing — umesh99, Dec 20 '18 at 07:05

score 8 · Accepted Answer · edited Jul 05 '19 at 15:45

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..

score 1 · Answer 2 · answered Dec 20 '18 at 06:35

2 changes can help you achieve this...

a boolean flag which is set after calling the getUser from your service... in case of a valid user, we set boolean to true and navigation gets displayed
in the HTML, we just set the ngIf against this boolean variable

/* APP.COMPONENT.TS */
  hideName:boolean =true;
  
  constructor(public _authService:AuthService,public router:Router){
    if(this._authService.getUser() == ''){
      this.hideName = false;
    }
    else {
      this.hideName =true;
    }
  }

  <!-- Added *ngIf="hideName" to app.component.html -->
  
  <nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey"  *ngIf="hideName">

Farhan Syah · Answer 3 · 2018-12-20T06:51:51.550

Because in your app.component.html (the page you use to display your outlet), you are inserting the code directly:

< Your header code >

....

<router-outlet></router-outlet>

....

< Your footer code >

The solution, is to:

Remove the header and footer code to a separate component, such as HeaderComponent, and FooterComponent, and then,
Call the outlet only on pages that you want them to show, by using proper selector.

For example: https://stackblitz.com/edit/angular-uhvgjm (I have done some part, you need to continue yourself when you want to show the header and footer)

unable to hide header and footer from login page using angular

3 Answers3

Linked