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

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

  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">


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

export class ExampleComponent implements OnInit {

  constructor( public nav: NavbarService ) {}
ngOnInit() {;


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