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

<nav class="navbar navbar-default navbar-fixed-top navClass">
    <div class="container-fluid">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                        (click)="toggleState()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
         <div class="collapse navbar-collapse"
              [ngClass]="{ 'in': isIn }">
          enter code here   <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">about</a></li>

            </ul>

        </div>
    </div>
</nav>

Answer 1

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 2

I was able to solve this without using a nav/toolbar service by adding a data object to the route in the route.module. I expanded on Todd Motto's example of adding dynamic titles to a page and added toolbar: false/true to the data object in my path. I then subscribed to the router events in my toolbar.component. Using Todd's event listener func, I read the path object and used the boolean value to set the toolbar visible or not visible.

No service needed and works on pagerefresh.

routing module

...
const routes: Routes = [
{ path: 'welcome', component: WelcomeComponent, data: { title: 'welcome', toolbar: false} }, ...];

toolbar.component

constructor(private router: Router, private activatedRoute: ActivatedRoute, public incallSvc: IncallService) {
    this.visible = false; // set toolbar visible to false
  }

  ngOnInit() {
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.activatedRoute),
        map(route => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
      )
      .pipe(
        filter(route => route.outlet === 'primary'),
        mergeMap(route => route.data),
      )
      .subscribe(event => {
        this.viewedPage = event.title; // title of page
        this.showToolbar(event.toolbar); // show the toolbar?
      });
  }

  showToolbar(event) {
    if (event === false) {
      this.visible = false;
    } else if (event === true) {
      this.visible = true;
    } else {
      this.visible = this.visible;
    }
  }

toolbar.html

<mat-toolbar color="primary" *ngIf="visible">
  <mat-toolbar-row>
    <span>{{viewedPage | titlecase}}</span>
  </mat-toolbar-row>
</mat-toolbar>

Answer 3

Adding to Dan's answer.

One more detail required for a complete answer. Which is registering the NavbarService as a provider for the whole application from app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { SharedModule } from './shared/shared.module';

import { AppComponent } from './app.component';
import { NavbarModule } from './navbar/navbar.module';
import { NavbarService } from './navbar/navbar.service';

import { AppRoutingModule, routedComponents } from './routing.module';

@NgModule({
    imports: [
        BrowserModule, FormsModule, HttpModule,
        NavbarModule,
        SharedModule,
        AppRoutingModule
    ],
    declarations: [
        routedComponents,
    ],
    providers: [
        // Here we register the NavbarService
        NavbarService  
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 4

I like this answer by Dan above. However, it does create some update console errors, which I do not want in a production app. I would suggest instead using this method: answer.

It might also be helpful to use a canDeactivate to complete the implementation. Where I was hiding the navbar, such as on login, I added a navigate away 'canDeactive' service:

{ path: 'login', component: LoginComponent, canDeactivate: [NavigateAwayFromLoginDeactivatorService]  },

The deactivate service looks like this:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { LoginComponent } from "app/user/login/login.component";
import { NavbarTopService } from "app/navbar-top/navbar-top.service";

@Injectable()
export class NavigateAwayFromLoginDeactivatorService implements CanDeactivate<LoginComponent> {

  constructor(public nav: NavbarTopService) {  }

  canDeactivate(target: LoginComponent) {
    this.nav.show();
    return true;
  }
}

This way, I can hide only on login and do not need to call show() on every other component.

Answer 5

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 6

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 7

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 8

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 9

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