var reference in Angular 2
<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>