@Component({
    selector: 'my-app',
    template: `
               <navbar [visible]="isLoggedIn"></navbar>
               <div class="container">
                    <router-outlet></router-outlet>
               </div>`,
    directives: [NavbarComponent,ROUTER_DIRECTIVES]
})

isLoggedIn=false;

import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
import { Http, Headers } from '@angular/http';
import { contentHeaders } from '../common/headers';
import {NavbarComponent} from '../navbar/navbar.component';

@Component({
  selector: 'login',
  directives: [ NavbarComponent,ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ],
  templateUrl: 'app/login/login.component.html',
  styles: [ 'app/login/login.component.css' ]
})
export class LoginComponent {
  constructor(public router: Router, public http: Http) {
  }


  //visibility: hidden;

  public isLoggedIn: boolean = false;


  login(event: any, username: string, password: string) {
    event.preventDefault();
    let body = JSON.stringify({ username, password });
    this.http.post('http://127.0.0.1:8050/auth', body, { headers: contentHeaders })
      .subscribe(
        response => {
          localStorage.setItem('id_token', response.json().access_token);
          console.log(response.json().access_token);
          console.log(this.isLoggedIn);
          this.isLoggedIn = true;
          console.log(this.isLoggedIn);
          this.router.navigate(['/home']);
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  }

  signup(event: any) {
    event.preventDefault();
    this.router.navigate(['/signup']);
  }
}

import {Component, Input} from '@angular/core';
import { Http, Headers } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { CORE_DIRECTIVES,Location } from '@angular/common';
import {ROUTER_DIRECTIVES, Router,ActivatedRoute} from '@angular/router';

@Component({
    selector: 'navbar',
    templateUrl: 'app/navbar/navbar.component.html',
    directives: [ROUTER_DIRECTIVES]

})
export class NavbarComponent {


    @Input() visible = true;

    //constructor(private _router: Router){}

    jwt: string;
    decodedJwt: string;
    response: string;
    api: string;
    //jwt_decode:any;
    constructor(private _loc:Location,private route: ActivatedRoute,
                public router: Router, public http: Http, public authHttp: AuthHttp) {
        this.jwt = localStorage.getItem('id_token');
        //this.decodedJwt = this.jwt && window.jwt_decode (this.jwt);
    }


   logout() {
        localStorage.removeItem('id_token');
        this.router.navigate(['/login']);
   }




}

<navbar [hidden]="!isLoggedIn"></navbar>