here my issue i unable to hide the header and footer from the login page . here i am having a mon 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="">Twitter</a>
                <a href="">Linkedin</a>

            </p>
        </div>

    </div>
</div>

please check this stack for issue

here my issue i unable to hide the header and footer from the login page . here i am having a mon 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.">Twitter</a>
                <a href="https://www.linkedin.">Linkedin</a>

            </p>
        </div>

    </div>
</div>

please check this stack for issue

• javascript
• angular
• typescript

Share Improve this question Follow edited Dec 20, 2018 at 8:01 Dexter asked Dec 20, 2018 at 6:06 DexterDexter 52844 gold badges1313 silver badges4242 bronze badges 4

• you need hide logout button from the nav bar or plete navbar? – ram12393 Commented Dec 20, 2018 at 6:12
• plete nav bar & footer from login page – Dexter Commented Dec 20, 2018 at 6:15
• stackoverflow./questions/36665094/… this can be helpful – Just code Commented Dec 20, 2018 at 6:23
• Best way of doing this is making a layout ponent and using child routing – umesh99 Commented Dec 20, 2018 at 7:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

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 ponents for the header (<app-header>) and footer(<app-footer>) you can use *ngIf with them too..

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.ponent.html -->
  
  <nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey"  *ngIf="hideName">

Because in your app.ponent.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 ponent, 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./edit/angular-uhvgjm (I have done some part, you need to continue yourself when you want to show the header and footer)

you can use an injectable class with Subject inside and push anything you need to the header from any event you want

import {EventEmitter, Injectable} from '@angular/core';
import {Subject, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderManagerService {
  private headerStatus = new Subject<any>();

  constructor() {
  }

  changeHeader(showHeader: boolean, rightBtn: string | undefined, onRightBtn: EventEmitter<boolean> | undefined, onLeftBtn: EventEmitter<boolean> | undefined) {
    this.headerStatus.next({showHeader, rightBtn, onRightBtn, onLeftBtn});
  }

  getHeaderStatus(): Observable<any> {
    return this.headerStatus.asObservable();
  }
}

and in your NavComponent

  protected onDestroy = new Subject<void>();
  showHeader = true;
  rightBtn: string | undefined;
  onRightBtn: EventEmitter<boolean> | undefined;
  onLeftBtn: EventEmitter<boolean> | undefined;

  constructor(private headerManager: HeaderManagerService,
              private router: Router) {
  }

  ngOnDestroy(): void {
    this.onDestroy.next();
    this.onDestroy.plete();
  }

  ngOnInit(): void {
    this.router.events
      .pipe(filter(navigation => navigation instanceof NavigationEnd))
      .subscribe((s: any) => {
        this.showHeader = true;
        this.rightBtn = undefined;
        this.onRightBtn = undefined;
        this.onLeftBtn = undefined;
      });
    this.headerManager.getHeaderStatus()
      .pipe(
        skipWhile(val => !val),
        takeUntil(this.onDestroy)
      )
      .subscribe(({showHeader, rightBtn, onRightBtn, onLeftBtn}) => {
        this.showHeader = showHeader;
        this.rightBtn = rightBtn;
        this.onRightBtn = onRightBtn;
        this.onLeftBtn = onLeftBtn;
      });
  }

in nav.ponent.html

<nav *ngIf="showHeader">
  some header
</nav>
<nav *ngIf="!showHeader">  <!--or ignore this element-->
  <div class="d-flex">
    <button (click)="onLeftBtn?.emit(true)">back</button>
    <div class="flex-grow-1"></div>
    <div (click)="onRightBtn?.emit(true)" [innerHTML]="rightBtn ?? ''"></div>
  </div>
</nav>

and push some change to header from your page

  constructor(private headerManager: HeaderManagerService) {
  }
  onLeftBtn = new EventEmitter<boolean>();
  onRightBtn = new EventEmitter<boolean>();
  ngOnInit(): void {
    this.headerManager.changeHeader(false,
      '<img class="word-arrow mb-4" src="assets/img/myimage.jpg">',
      this.onRightBtn,
      this.onLeftBtn);
    this.onLeftBtn.subscribe((value) => {
      console.log('onLeftBtn');
    });
    this.onRightBtn.subscribe((value) => {
      console.log('onRightBtn');
    });
  }