Untitled

@Component({
    selector: 'my-app',
    providers: [FORM_PROVIDERS, RoleService, UserService, Login, LoginService],
    inputs: ['loggedIn'],
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet],
    template: `<body>
                <div *ngIf="loggedIn === true">
                    <nav class="navbar navbar-inverse navbar-top" role="navigation">
                        <div class="container">
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav navbar-right">
                                    <li>
                                        <a (click)="logout()">Logout</a>
                                    </li>
                                    </ul>
                                </div>
                         </div>
                    </nav>
                </div>
                    <div class="container">
                        <router-outlet></router-outlet>
                    </div>
                  </body>`
})

export class AppComponent{

    loggedIn: boolean;

    constructor(public Login: Login){
        Login.loggedIn.subscribe((data) => this.onUserChanged(data));
    }

    onUserChanged(user){
        this.loggedIn = true;
        console.log(this.loggedIn);
    }

    public roles = {};
    public title = 'First Angular App';


    logout(){
        localStorage.removeItem('jwt');
    }

}

export class Login{

    jwt: any;
    username: string;
    password: string;
    loggedIn: EventEmitter<boolean>;

    constructor(public _loginService: LoginService, public router: Router){
        this.loggedIn = new EventEmitter();
    }

    submitLogin(username, password){
        console.log(username);
        console.log(password);
        let body = {username, password};
        this._loginService.authenticate(body).subscribe(
            response => {
                console.log(response);
                localStorage.setItem('jwt', response.json_token);
                this.router.navigate(['UserList']);
                this.loggedIn.emit(<boolean>true);
                console.log(this.loggedIn);
            }
        );

    }
}

@Injectable()
export class LoginService {

    constructor(public http: Http) {

    }

    authenticate(form_body){
        return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
                .map((response => response.json()));
    }
}