Don't show menu from app.component.html in angular 2?

Question

Angular

In general, the essence is this:
There is a project on Angular 2, several components have been added: home, page, login, etc., which are used for navigation (listing app.routing.ts below:

import { Routes } from '@angular/router';

// компоненты системы
import { LoginComponent }       from './components/index';
import { HomeComponent }        from './components/index';
import { pageComponent }  from "./components/index";

// Контроль авторизации
import { AuthGuard } from './_guards/index';


export const appRoutes: Routes = [
    { path:
        '',
        component: HomeComponent ,
        canActivate: [AuthGuard]
    },

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

    { path:
        'page',
        component: pageComponent,
        canActivate: [AuthGuard]
    },

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

In the main template (from which the launch begins) the navigation is registered:

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

        <li>
          <a routerLink="/" routerLinkActive="active">Главная</a>
        </li>
        <li>
          <a routerLink="/page" routerLinkActive="active">Страница 1</a>
        </li>
        </li>
        <li>
          <a routerLink="/login" routerLinkActive="active">Выход</a>
        </li>

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

<!-- Begin page content -->
<div id="wrapper" class="container">
  <router-outlet></router-outlet>
</div>

How can I hide this main template menu if the user is not logged in?

Answer 1

*ngIf doesn't work?