Angular 2 routing and navigation menu controls

[robin01]

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>