title: Component template variable not updating when service emits a change (angular)
body: <p>I have a service:</p>
  
  <pre><code>@Injectable({ providedIn: 'root' })
  export class AuthenticationService {
    signInChange: Subject&lt;boolean&gt; = new Subject&lt;boolean&gt;();
    isSignedIn: boolean;
  
    constructor() {
      this.isSignedIn = false;
    }
  
    signInChange: Subject&lt;boolean&gt; = new Subject&lt;boolean&gt;();
    isSignedIn: boolean;
  
    login() {
      this.auth2.signIn()
        .then(user =&gt; {
          this.isSignedIn = true;
          this.signInChange.next(this.isSignedIn)
        })
        .catch(error =&gt; {
          console.log("Error signing in")
        })
    }
  
    logout() {
      this.auth2.signOut()
        .then(user =&gt; {
          this.isSignedIn = false;
          this.signInChange.next(this.isSignedIn)
        })
        .catch(error =&gt; {
          console.log("Error signing out")
        })
    }
  
  </code></pre>
  
  <p>and a component:</p>
  
  <pre><code>export class HomeComponent implements OnInit {
    signInSubscription: Subscription;
    isSignedIn: any;
  
    constructor(private authService: AuthenticationService) {
      this.isSignedIn = authService.isSignedIn;
      this.signInSubscription = authService.signInChange.subscribe(value =&gt; {
        console.log("status changed to: " + value)
        this.isSignedIn = value
      })
    }
  
    checkValues() {
      console.log("Component says: " + this.isSignedIn);
      console.log("Auth says: " + this.authService.isSignedIn)
    }
  </code></pre>
  
  <p>and here is the HTML:</p>
  
  <pre><code>&lt;div id = "login-test"&gt;
    &lt;div class="g-signin2"&gt;&lt;/div&gt;
    &lt;button (click)="signIn()"&gt;Sign in&lt;/button&gt;
    &lt;button (click)="signOut()"&gt;Sign out&lt;/button&gt;
    &lt;button (click)="checkValues()"&gt;Check values&lt;/button&gt;
    &lt;p&gt;{{this.isSignedIn}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the observable works as expected (eg. when the sign in status is change the correct status is logged) BUT on the template itself the variable does not update when a change is observed.</p>
  
  <p>Here's what I dont understand: </p>
  
  <ol>
  <li><p>When I click the Check Values button, the output is ALWAYS correct. The isSignedIn property is being set correctly every time there is an update in the service. BUT THE TEMPLATE ITSELF DOESN'T UPDATE.</p></li>
  <li><p>If I set up a button to only toggle the value {{this.isSignedIn}}, the template updates real time. Why will it not update real time if the change is coming from the observable?!?</p></li>
  </ol>