Hide the navigation bar in jHipster Angular 2

Hiding a navigation bar is the easiest solution on Angular 2 version of jHipster. For this, you need to create a NavService and implement it on every component you need to show the navigation bar.


Let's first create a service in the directory of your navigation component resides.

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

}

There after you need to call this service on your navigation component constructor

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 ) {}

}

After the use, the above declared filed on your view in ngIf to show and hide the service 

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

</nav>

Finally, show and hide your navigation bar by injecting the service to your component and enable or diable it. By default it is disabled/hidden.

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

}

That's it, now you have the custom navigation service to handling and controls the view level of your navigation bar utils.