title: How to define global variables in Angular 2 in a way that I can use them for property binding in templates?
body: <p>In my Angular 2 (beta 14) application I need to keep track of user login status in order to hide/display certain elements.</p>
  
  <p>The issue I'm getting is that property binding is not working the way I did as follows.</p>
  
  <p>I created a class to store and update global variables:</p>
  
  <p><strong>app-global.ts</strong></p>
  
  <pre><code> import {Injectable} from "angular2/core";
  
   @Injectable() export class AppGlobals {
     // use this property for property binding
     public isUserLoggedIn: boolean = false;
  
     setLoginStatus(isLoggedIn){
         this.isUserLoggedIn = isLoggedIn;
     }
  
     getLoginStatus(){
         return this.isUserLoggedIn;
     } }
  </code></pre>
  
  <p>In the login component I import AppGlobals</p>
  
  <pre><code>export class LoginComponent {
      constructor(private _appGlobals: AppGlobals) { }
  </code></pre>
  
  <p>and set login state by</p>
  
  <blockquote>
    <p>this._appGlobals.setLoginStatus(true);</p>
  </blockquote>
  
  <p>In another component I inject AppGlobals as I do in LoginComponent</p>
  
  <p>I define a class (component)'s property</p>
  
  <blockquote>
    <p>isLoggedIn: boolean = this._appGlobals.isUserLoggedIn; // I also tried by using the getter instead of the public property (see above)</p>
  </blockquote>
  
  <p>which I then use in the component's template to show/hide a certain element:</p>
  
  <pre><code>&lt;!-- here I also tried with {{!isLoggedIn}} but results in a syntax error whereas using [(hidden)] instead of [hidden] changes nothing --&gt;
  &lt;div id="some-element" [hidden] = "!isLoggedIn"&gt;
  </code></pre>
  
  <p>Finally, the binding works but <strong>there is no update</strong> (this component is part of AppComponent template and shown in every page) when another component (e.g. LoginComponent) sets the login status.</p>
  
  <p><strong>EDIT</strong> I tried to apply Gunter's answer but I get the following errors:</p>
  
  <pre><code>app/app-globals.ts(10,54): error TS2346: Supplied parameters do not match any signature of call target.
  app/app-globals.ts(13,29): error TS2339: Property 'emit' does not exist on type 'BehaviorSubject&lt;boolean&gt;'.
  </code></pre>
  
  <p>Error at line 10 comes from [SOLVED]</p>
  
  <blockquote>
    <p>public isUserLoggedIn:BehaviorSubject = new BehaviorSubject().startWith(false);</p>
  </blockquote>
  
  <p>and it's apparently caused by BehaviorSubject expecting <strong>1 parameter</strong></p>
  
  <p>Error at line 13 comes from</p>
  
  <blockquote>
    <p>this.isUserLoggedIn.emit(isLoggedIn);</p>
  </blockquote>
  
  <p>and it's apparently cause by a non-existing <strong>emit</strong> method.</p>
  
  <p>Also, I don't understand how shall I use AppGlobals so that the property binding auto updates in another component (see last example before EDIT)</p>
  
  <p>Further, in LoginComponent I replaced isLoggedIn boolean type with <strong>BehaviorSubject</strong> because isUserLoggedIn has type BehaviorSubject in AppGlobals</p>
  
  <p>but</p>
  
  <blockquote>
    <p>this._appGlobals.isUserLoggedIn.subscribe(value => this.isLoggedIn = value);</p>
  </blockquote>
  
  <p>returns a TypeError: </p>
  
  <blockquote>
    <p>Assigned expression type boolean is not assignable to type BehaviorSubject</p>
  </blockquote>