Skip to main content

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. 



Popular posts from this blog

Missionaries & Canibal Problem in AI using Pro Log

Introduction: Missionaries and Cannibals is a notable problem in Artificial Intelligence in which three Missionaries and three Cannibals attempt to cross a river to the other side using a boat.  However, there are constraints on the problem, most notably that there can never be more Cannibals than Missionaries on either side of the river (as they will be eaten!), the boat must always take across at least one person, and the goal state is when all Missionaries and all Cannibals have successfully reached the right side of the river from the left.  Thus, with these constraints in mind, they can be programmed into Prolog fairly simply, and a solution can be searched for.