Angular 2 - How to Hide Nav Bar in Some Components

angular 2 - how to hide nav bar in some components

Navbar control and formatting is often needed throughout an app, so a NavbarService is useful. Inject in those components where you need.

navbar.service.ts:

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

  doSomethingElseUseful() { }

  ...
}

navbar.component.ts:

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

navbar.component.html:

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

example.component.ts:

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

how to hide navbar from app.component.html and show after login

What I do for this kind of cases (and to me it looks easier), is this structure

AppComponent
LoginComponent
Guarded/
    MainView/
    MainViewComponent
        RandomComponent

1. Your AppComponent has a router outlet
2. The default route on that is the LoginComponent
3. Once connected, you send the user to another route, let's say /connected, that is guarded
4. This sends the user on the MainViewComponent
5. MainViewComponent has the navbar, and a router outlet
6. The default route is the component you desire.

This way, you have a clear separation of logged/non-logged components, and you don't have to play with conditions to show/hide some of the components in your pages.

Hiding navigation bar from login page in angular 4

This is what your service could look like

import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
  private userLoggedIn = new BehaviorSubject(false);

  getLoggedIn(): Observable<boolean> {
    return this.userLoggedIn.asObservable();
  }

  getLoggedInValue(): boolean {
    return this.userLoggedIn.getValue();
  }

  setLoggedIn(val: string) {
    this.userLoggedIn.next(val);
  }
}

In your LoginComponent

import { LoginService } from 'login.service';

constructor(
    private loginService: LoginService
) {  }

// If user is logged in, set value to true
private setLoggedIn(value: boolean): void {
   loginService.setLoggedIn(value);
}

In your HomeComponent

import { LoginService } from 'login.service';
import { Subscription } from 'rxjs/Subscription';

private userLoggedIn: false;
private subscription: Subscription;

constructor(
    private loginService: LoginService
) {  }

ngOnInit(): void {

    // get the current value
    this.subscription = this.loginService.getLoggedIn().subscribe(value => {
        this.userLoggedIn = value;
    });

}

ngOnDestroy(): void {

   if(this.subscription){
       this.subscription.unsubscribe();
   }

}

And in your Template

<div class="bg-dark" *ngIf="userLoggedIn && (layout == 'empty-view-1')"></div>
<sample-modals *ngIf="userLoggedIn && (controller == 'notifications' && view == 'modals')"></sample-modals>
<right-sidebar-1 *ngIf="userLoggedIn && (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></right-sidebar-1>

Hide side navigationbar on certain pages/components in angular

A way to do this, is to get the current path thanks to Router and Location of Angular in the constructor, and then, simply use *ngIf to show or not the side bar, for the path you want.

sidenav.component.html

<nav *ngIf="path==='/asset'">
        <div id="container">
            <div class="sidebar">
                <ul id="side_nav">
                    <li class="test"><a href="#"><img src="../../../content/images/icons8-home-50.png"></a></li>
                    <li><a routerLink="project" routerLinkActive="active">Project Details</a></li>
                    <li><a routerLink="asset" routerLinkActive="active">Asset</a></li>
                    <li><a routerLink="threat" routerLinkActive="active">Threats</a></li>
                    <li><a routerLink="attack-tree-node" routerLinkActive="active">Attack-Tree</a></li>
                    <li><a href="#">Review</a></li>
                    <li><a href="#">Statistics</a></li>
                </ul>
            </div>
        </div>
</nav>

sidenav.component.ts

import { Router } from '@angular/router'
import { Location } from '@angular/common';

export class SidenavComponent implements OnInit {
path = '';
  constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((val) => {
      this.path = this.location.path();
    });
  }
}

---

Related Topics