No UI-Update with Observable

[Schoko19961]

My project is lookng similar to this one.
But unlike the stackblitz demo, the string next to the button does not change.
It only changes when I trigger another event on the UI.

When I add this line of Code in the component.ts ngOnInit-Method, I get the output with user information immediately, but still no update on the UI.
this.stat$.subscribe(dat=>{ console.dir(dat); });

However, when I update the Observable outside of signInWithPopup, the UI updates as expected.

this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
this.changeState({user: "triggered"});

Version-Info:

Angular: 5.2
Angularfire2: 5.0.0-rc.6
Firebase: 4.10.1

Other
nodejs: 8.9.1
npm: 5.6.0
zonejs: 0.8.19
Windows 7

How to reproduce these conditions

1. Create a Service with these vars/fuctions:

private appStat: BehaviorSubject<any> = new BehaviorSubject(this.stat);
public appStat$: Observable<any> = this.appStat.asObservable();

constructor(private afAuth: AngularFireAuth) {}

private changeState(newStat) {
  this.appStat.next(newStat);
}

public signIn() {
  this.afAuth.auth.signInWithPopup(new  firebase.auth.GoogleAuthProvider())
    .then(res  =>  {
      this.changeState(res);
    });
};

2. Call SignIn-Method and print the Observable appStat$ in the UI.
   {{service.appStat$|async|json}}

Expected behavior

UI updates automatically

Actual behavior

UI needs another event to update.

[hiepxanh]

Hello @Schoko19961, can you set an console log in changeState() and see that function was call?

1. maybe changeState() not call with new response
2. changeState() was call with new response but UI not update

in the the case 2, you can use Change Detection to force angular to update view:

 constructor(private ref: ChangeDetectorRef, private afAuth: AngularFireAuth) {}

public signIn() {
  this.afAuth.auth.signInWithPopup(new  firebase.auth.GoogleAuthProvider())
    .then(res  =>  {
      this.changeState(res);
    });
};

private changeState(newStat) {
  console.log('is that function work properly??',newStat);
  this.appStat.next(newStat);
  this.ref.detectChanges();
}

you can read more at here angular Change Detector Document

Angular Change Detection Explained

[davideast]

Closing due to inactivity. If the problem still persists feel free to open another issue.