Angular2: Using routes, how to display the navigation bar after successfully logged in?

I’m trying to show the navigation bar, once the user successfully do.

For example:

How To Change “showMenu” property in “AppComponent” inside the “LoginComponent”? Important: I am using routes.


  selector: 'app',
  template: `<div *ngIf="showMenu">
  directives: [ROUTER_DIRECTIVES, MenuNavComponent]
  { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true },
  { path: '/welcome', name: 'Welcome', component: WelcomeComponent }
export class AppComponent {
  public showMenu : boolean;


  selector: 'fnd-login',
  templateUrl: './fnd/login/components/login.component.html',
  providers: [LoginService]
export class LoginComponent {
  /* .. other properties */

  constructor(private _router: Router, private _loginService: LoginService ) {
  /* .. other methods  */
  /* .. other methods  */

  private onLoginSuccessfully(data : any) : void {
    /* --> HERE: Set showMenu in AppComponent to true. How? */


Or this design is not the best way to solve it?

Leave a Reply

3 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

best modern way in angular4, with new router, with children routes, just needed use UrlSerializer-class to remove parenthesis,, anyone did uses it? export const ROUTES: Routes = [ { path: 'login', component: LoginComponent }, { path : '', children: [ { path: '', component: DefaultLayoutComponent, children: [ { path: '', component: HomeComponent, canActivate: [AuthGuard] }, { path: 'users', component: UsersListComponent, canActivate: [AuthGuard] }, { path: 'users-add', component: UsersAddComponent, canActivate: [AuthGuard] }, { path: 'users-view/:id', component: UsersViewComponent, canActivate: [AuthGuard] }, { path: 'users-edit/:id', component: UsersEditComponent, canActivate: [AuthGuard] }, ] } ] }, // otherwise redirect to home { path: '**',… Read more »


I recently did something similar and here is how I did it. First, you need to create a NavBarComponent at the root of your app. And in the NavBarComponent you reference (what I call) a GlobalEventsManager which is a service that you inject where you need it. Here is a look at the GlobalEventsManager: import { Injectable } from '@angular/core'; import { BehaviorSubject } from "rxjs/BehaviorSubject"; import { Observable } from "rxjs/Observable"; @Injectable() export class GlobalEventsManager { private _showNavBar: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable(); constructor() {} showNavBar(ifShow: boolean) {; } }


Actually there is a totally different approach that does not use any of event emitters / listeners. I have nothing against the events and I use both approaches (the below one and @brando’s one) according to the particular project needs / complexity. The method: we have 2 application modules (areas): public (that has no navbar) and protected (the one that has one). Public module contains all public routes: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { RegistrationComponent } from './registration/registration.component'; import {… Read more »