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

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 2

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 3

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>