unable to hide header and footer from login page using angular

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

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)

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.complete();
  }

  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.component.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');
    });
  }