import { Component, OnDestroy }   from '@angular/core';
import { AuthService }            from '../services/auth';

@Component({
moduleId: module.id,
selector: 'navbar',
templateUrl: '../templates/navbar.html'
})

export class NavbarComponent implements OnDestroy {
public isLoggedIn: boolean = localStorage.getItem('token') ? true :
false;
private _isLoggedInSubscription;

constructor(private _authService: AuthService) {
this._isLoggedInSubscription = _authService.isLoggedIn.subscribe((value) => {
  if (value == undefined) return;
  this.isLoggedIn = value;
  });
 }

logout() {
this._authService.logout();
}

ngOnDestroy() {
this._isLoggedInSubscription.unsubscribe();
}
}

<nav class="navbar navbar-default">
<div class="container-fluid">
<ul *ngIf="isLoggedIn" class="nav navbar-nav">
  <!-- Logged in -->
  <li class="nav-item">
    <a routerLink="/" class="nav-link">Home</a>
  </li>
  <li>
    <a routerLink="/admin/tasks" class="nav-link">Tasks</a>
  </li>
  <li>
    <a (click)="logout();" href="javascript:void(false);" class="nav-link">Sign out</a>
  </li>
  </ul>
  <ul *ngIf="!isLoggedIn" class="nav navbar-nav">
  <!-- Logged out -->
  <li class="nav-item">
    <a routerLink="/" class="nav-link">Home</a>
  </li>
  <li>
    <a routerLink="/login" class="nav-link">Sign in</a>
  </li>
  <li>
    <a routerLink="/registration" class="nav-link">Sign up</a>
  </li>
  </ul>
  </div>
  </nav>