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.

app.ts:

@Component({
  selector: 'app',
  template: `<div *ngIf="showMenu">
               <fnd-menu-nav></fnd-menu-nav>
             </div>
             <router-outlet></router-outlet>
              `,
  directives: [ROUTER_DIRECTIVES, MenuNavComponent]
})
@RouteConfig([
  { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true },
  { path: '/welcome', name: 'Welcome', component: WelcomeComponent }
])
export class AppComponent {
  public showMenu : boolean;
}

login.component.ts:

@Component({
  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? */
    this._router.navigate(['Welcome']);

  }
}

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

3
Leave a Reply

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

best modern way in angular4, with new router, with children routes, just needed use UrlSerializer-class to remove parenthesis, https://angular.io/docs/ts/latest/api/router/index/UrlSerializer-class.html, 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 »

Jason
Guest

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) { this._showNavBar.next(ifShow); } }

Jason
Guest

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 »