Angular 2 routing and navigation menu controls

[Dawg]

After a successful login, the user is routed to a menu (getbootstrap) displayed at the top. One of the link for example is a click to service page and when I click the service link the menu is hidden and service page is displayed. How can I maintain the menu on the top while displaying the other components below the menu? 

Search the web and I couldn’t find a good example. Any help you could provide would be greatly appreciated.

app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: `<router-outlet></router-outlet>`,

})

export class AppComponent  { 

  name = 'Angular'; 

}//END of AppComponent

app.router.ts

const routes: Routes = [  

    {   path: '', component: TopMenuComponent, canActivate: [ LoggedInGuardServices ] }, 

    {   path: 'topmenu', component: TopMenuComponent, canActivate: [ LoggedInGuardServices ] }, 

    {   path: 'home', component: HomeComponent, canActivate: [ LoggedInGuardServices ]  }, 

    {   path: 'login', component: LoginComponent },    

    {   path: 'about', component: AboutComponent }, 

    {   path: 'profile', component: ProfileComponent, canActivate: [ LoggedInGuardServices ] }, 

    {   path: 'service', component: ServicesComponent, canActivate: [ LoggedInGuardServices ] },

    // otherwise redirect to home

    { path: '**', redirectTo: '' }   

];

top-menu.component.ts

<div class="container">

      <nav class="navbar navbar-default">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">Test project</a>

          </div>

          <div id="navbar" class="navbar-collapse collapse">  

            <ul class="nav navbar-nav">

              <li class="active"><a routerLink="/dashboard" routerLinkActive="active" >Dashboard</a> </li>

              <li> <a routerLink="/service">Service</a> </li>

              <li> <a href="#">Contact</a></li> 

            </ul>

            <ul class="nav navbar-nav navbar-right"> 

              <li> <a routerLink="/profile">Welcome: Name </a></li>

              <li> <a href="#">space</a> </li>

              <li> <a routerLink="/login">Logout</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

</div>

[Sander Elias]

Hi Dawg,

Move the menu outside of the primary router outlet. You can use a separate outlet, or hide it when not logged in.

Regards

Sander

[Dawg]

Hi Sander,

Thanks for your help but after 3 days I'm still not catching something.

when I load the app.component.ts it loads the top-menu.component.ts pending results of if(JSON.parse(localStorage.getItem('auth_token'))). this if statement is inside top-menu.component.ts.

1. when it goes through the app.component.ts the top-menu.component.ts is loaded.

2. in top-menu.component.ts i have testVar = if(JSON.parse(localStorage.getItem('auth_token'))). if true display.

3. according to console.log testVar inside the top-menu.component remains false and I'm assuming I completed the top-menu.component.ts and any thing I do after not reflected back.

4. how can i have top-menu.component check after it has loaded if testVar = if(JSON.parse(localStorage.getItem('auth_token'))) has changed?

[Sander Elias]

Hi Dawg,

Remeber your controller runs during init only, it doesn't get reevaluated. The correct way to handle login is through a service. In that service, you can create an observable that pushes login state changes to where ever you need them.

steps to take:

1. create an auth service. this handles all business logic for auth (like saving it to localStorage etc..)
2. make sure there is an observable in that service, that pushes state changes
3. subscribe to it wherever you need it, in this case in your navBar controller.

Hope this helps you a bit.

Regards

Sander