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.

I have a UserService which has a currentUser property that is a BehaviorSubject:

currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));

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 tick() on an ApplicationRef:

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 => x != null 
         && x.eventName == 'auth.authResponseChange')
      .subscribe((event) => {
        this.updateUser(new User(event.data));
      }
}

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

<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? &nbsp; <img src="{{currentUser.value.profilePicUrl}}"></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?

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.

I have a UserService which has a currentUser property that is a BehaviorSubject:

currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));

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 tick() on an ApplicationRef:

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 => x != null 
         && x.eventName == 'auth.authResponseChange')
      .subscribe((event) => {
        this.updateUser(new User(event.data));
      }
}

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

<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? &nbsp; <img src="{{currentUser.value.profilePicUrl}}"></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?

Edit

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:

constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)

...

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

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

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...