How to trigger change detection in Angular2?
<p>I'm creating a Facebook service that calls the Facebook javascript api and am wondering how to best implement change detection when my values are updated.  </p>

<p>I have a <code>UserService</code> which has a <code>currentUser</code> property that is a BehaviorSubject:</p>

<pre><code>currentUser: Subject&lt;User&gt; = new BehaviorSubject&lt;User&gt;(new User(null));
</code></pre>

<p>And when I want to update the user in response to the facebook javascript sdk telling me the user has logged in or logged out, I update that and need to call <code>tick()</code> on an <code>ApplicationRef</code>:</p>

<pre><code>updateUser(user: User) {
  console.log('UserService.updateUser:', user);
  this.currentUser.next(user);
  this.appRef.tick(); // UI does not update without this
}

constructor(facebook: Facebook) {
  this.facebook.facebookEvents.filter(x =&gt; x != null 
         &amp;&amp; x.eventName == 'auth.authResponseChange')
      .subscribe((event) =&gt; {
        this.updateUser(new User(event.data));
      }
}
</code></pre>

<p>In my component I store the 'currentUser' from the user service in the constructor and bind to the value property:</p>

<pre><code>&lt;h2&gt;Logged into Facebook as {{currentUser.value.name}}&lt;/h2&gt;
&lt;p&gt;Is this you? &amp;nbsp; &lt;img src="{{currentUser.value.profilePicUrl}}"&gt;&lt;/p&gt;
</code></pre>

<p>Am I doing something wrong?  Is there a better way than having to call ApplicationRef.tick() after a change triggered from an external library?</p>

<h2>Edit</h2>

<p>I tried using NgZone and that doesn't work, using a different event that returns posts in a feed as the service pages through them:</p>

<pre><code>constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)

...

this.postsSubject.subscribe((post) =&gt; {
  this.zone.runOutsideAngular(() =&gt; { // doesn't do anything
    this.posts.push(post);
    console.log('postsSubject POST, count is ', this.posts.length);
    ref.tick(); // required to update bindings
  });
}
</code></pre>

<p>The console shows the count incrementing, but the html binding <code>{{posts.length}}</code> is only updated if I add the <code>ref.tick()</code> call...</p>

<p>I think I saw somewhere that you can make available 'inputs' to any component from the top-level app component which might be the way to go for the logged in user, but not other calls like getting posts in a feed...</p>