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 {

  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.