title: angular change detection for updates within a callback
body: <p>I am looking for reasoning about a simple problem.
  I have a simple component which has a boolean property which i display in the component's template.Now the problem is that if I update this property in a callback, the property does get updated (in the component) but the updated value does not get rendered (change detection does not work, and I have to explicitly call <code>changeDetectorRef.detectChanges();</code> to render the updated value).</p>
  
  <p>I have this in my template:</p>
  
  <pre><code>&lt;div *ngIf="isUserLoggedIn"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  &lt;div *ngIf="!isUserLoggedIn"&gt;
      &lt;div id="googleBtn" (click)="onSignIn()"&gt;Sign In&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this in my component:</p>
  
  <pre><code>gapi.load('auth2', () =&gt; {
        this.auth2 = gapi.auth2.init({
          client_id: '769107420471-782b0i2f3dt9u05dhrb4j21g7ajglrg6.apps.googleusercontent.com',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
        var googleBtn = document.getElementById('googleBtn');
        if(googleBtn) {
          this.attachSignin(document.getElementById('googleBtn'));
        }
      });
    }
    public attachSignin(element) {
      this.auth2.attachClickHandler(element, {},
        (googleUser) =&gt; {
          this.signUpService.googleLogin(googleUser.getAuthResponse().id_token, 
          this.successCallback.bind(this), 
          this.signOut.bind(this));
        }, (error) =&gt; {
          alert(JSON.stringify(error, undefined, 2));
        });
    }
  
    successCallback = function (data) {
      // this.changeDetectorRef.detectChanges();
      this.isUserLoggedIn = this.utils.isUserLoggedIn();
    }
  </code></pre>
  
  <p>as you can see the expected behaviour is : initially "isUserLoggedIn" will be false, and then user clicks on "Sign In" button, which calls a function from another service and toggles "isUserLoggedIn" in the successCallback of that function thus resulting in the template elements also getting toggled.</p>
  
  <p>But this only happens if I uncomment the first line in successCallback (),
  my quest is why do I need to explicitly call <code>changeDetectorRef.detectChanges()</code> to reflect changes in dom, why change detection is not working with callback (I checked other wise, with simple <code>Observable.interval(2000).subscribe(x =&gt; {this.isUserLoggedIn = !this.isUserLoggedIn});</code> which works perfectly fine)</p>