angular 2 - how to hide nav bar in some components

Question

I am created nav bar separately in nav.component.html ,how to hide nav bar in some components like login.component.

nav.component.html

Answer 1

Add *ngIf='!showNav' in template

<nav class="navbar navbar-default navbar-fixed-top navClass" *ngIf='!showNav' >

And in LoginComponent

showNav = true;

This will show nav rest of the all the pages , if you want to hide in any pages just put showNav = true; in that component.

How it works :

First for it will check for showNav variable but it will not be available , so it will return false for the other pages where we want to show menu , so need to declare that variable any other pages.

In login page we set the value to true, so it will make it false and hide the nav.

Answer 2

You can use ngIF directive on components where nav is located

   <nav *ngIf="this.currentRoute!=='login'" navigation>
   </nav>

after you get the current route:

  this.router.events.subscribe(event => {
  if (event.constructor.name === "NavigationEnd") {
    this.name = (<any>event).url.split("/").slice(-1)[0];
    this.isLogin = this.currentRoute === 'login';
  }
})

Answer 3

Another solution to this problem, specially if you are looking to open/close/toggle/ the side nav bar from other controls is to hold a reference to the side nav bar in a service as discussed below:

https://stackoverflow.com/a/48076331/1013544

this worked well for me as I had an application where the side nav was more like the root element and the router components were its content so they would be disabled in the background when the side nav menu is opened.

Answer 4

Navbar control and formatting is often needed throughout an app, so a NavbarService is useful. Inject in those components where you need.

navbar.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class NavbarService {
  visible: boolean;

  constructor() { this.visible = false; }

  hide() { this.visible = false; }

  show() { this.visible = true; }

  toggle() { this.visible = !this.visible; }

  doSomethingElseUseful() { }

  ...
}

navbar.component.ts:

import { Component } from '@angular/core';
import { NavbarService } from './navbar.service';

@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html'
})

export class NavbarComponent {

  constructor( public nav: NavbarService ) {}
}

navbar.component.html:

<nav *ngIf="nav.visible">
 ...
</nav>

example.component.ts:

import { Component, OnInit } from '@angular/core';
import { NavbarService } from './navbar.service';

@Component({
})
export class ExampleComponent implements OnInit {

  constructor( public nav: NavbarService ) {}
}
ngOnInit() {
  this.nav.show();
  this.nav.doSomethingElseUseful();
}

Answer 5

In order for it to work also add "Providers" wherever you're importing the NavbarService

navbar.component.ts and also example.component.ts

@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html',
  providers: [NavbarService ]
})

Answer 6

The linked answer above by JaganY is the best answer if you are hiding a mat-sidenav element. You should never have simple code like this require change detection. Here is an example for other types of elements:

app.componenent.html

    <nav #rNav>
      <app-rightnav></app-rightnav>
    </nav>

app.componenent.ts

  @ViewChild('rNav') rNav!: ElementRef;

  constructor(public nav: NavbarService) { }

  ngAfterViewInit(): void {
    this.nav.setRight(this.rNav);
  }

navbar.service.ts

import { Injectable, ElementRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavbarService {

  private right!: ElementRef;
  private visible!: boolean;

  hideR() { 
    this.visible = false;
    this.right.nativeElement.style.display = 'none';
  }

  showR() { 
    this.visible = true; 
    this.right.nativeElement.style.display = 'block';
  }

  toggleR() { this.visible ? this.hideR() : this.showR(); }

  setRight(e: ElementRef) {
    this.right = e;
  }
}

child-components.html

constructor() {
  this.nav.hideR(); // or this.nav.showR();
}