CODEWITHSUNDEEP
angularrxjs
poimsm2
poimsm2

Reputation: 562

Observable not refreshing the view - Angular 2+

When I call login() or logout() in auth.service.ts from login.ts component after showing facebook popup, the isAuth remain false in the home view but if I do console.log(this.isAuth) inside subscribe() it updates correctly in console.

When I call login() or logout() directly without using firebase facebook login, It works fine.

Home

HTML

 <h1> {{isAuth}} </h1>

TS

 isAuth = false;

 constructor(private _auth:AuthService) {
    _auth.authState.subscribe(state => this.isAuth = state)
   }

AuthService

authState = new Subject<boolean>();

login(access_token) {
    this.authState.next(true);
  }

 logout() {
    this.authState.next(false);
  }

Subject is imported from

import { Subject } from "rxjs/Subject";

login.ts

signInWithFacebook() {
    this.afAuth.auth
      .signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then((res: any) => {
        const access_token = res.credential.accessToken;
        this._auth.login(access_token);
        this._router.navigateByUrl('/home');      
      });

the facebook promise is solved and the this._auth.login() is called and the isAuth is changed but the view is not updated...

Upvotes: 0

Views: 153

Answers (1)

Wei Lun
Wei Lun

Reputation: 43

Perhaps you can try NgZone

ts

isAuth = false;

constructor(private _auth:AuthService, private ngZone: NgZone) {
ngZone.run(() => {
   _auth.authState.subscribe(state => this.isAuth = state)
  });
}

Upvotes: 1

Related Questions