title: var reference in Angular 2
body: <p>I have appComponent, and <code>this.loggedIn = this.authenticationService.isLogged;</code> in it.</p>
  
  <p>So appComponent uses authenticationService and takes isLogged data from it. I suppose <code>this.loggedIn</code> has reference to service data?</p>
  
  <p>Now when I run method from appComponent:</p>
  
  <pre><code>logout() {
      this.authenticationService.isLogged = false;
  }
  </code></pre>
  
  <p><code>this.loggedIn</code> should change to false. But it doesn't.</p>
  
  <p>Here part of appComponent.ts:</p>
  
  <pre><code>import {AuthenticationService} from './auth_service/auth_service';
  @Component({
  selector: 'my-app',
  styleUrls: ['app/app_component.css'],
  templateUrl: './app/main_app_template.html',
  directives: [ ROUTER_DIRECTIVES],
  providers: [ SendLoginService, AuthenticationService, ConfigurationService, SetupIntervalService]
  })
  
  export class AppComponent  {
  loggedIn ;
  constructor (private authenticationService: AuthenticationService
  }
  ngOnInit () {
      this.loggedIn = this.authenticationService.isLogged;
  }
   logout() {
      this.authenticationService.isLogged = false;
      console.log(this.loggedIn);   //returns:  true . but should return 'false'
  }
  </code></pre>
  
  <p>authenticationService.ts :</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  @Injectable ()
   export class AuthenticationService extends HttpBaseClass {
  isLogged = true;
    }
  </code></pre>