How to create an observable?

Question

I think I understand the concept of Observables in Rxjs but I am struggling to convert the theory into code.

I have an Angular component, say C. I want that it should show certain HTML components depending on whether the user is logged in or not. For this I am using the code similar to

<ng-container *ngIf = "userNotloggedIn"> 
...

I have an Angular Service which authenticates the user. I want that once the user is authenticated, the service should emit a value (say boolean true or false corresponding to signin and sign out). I will like to use an Observable for this and my component should subscribe to this Observable.

I am struggling to convert this into code. I my service, I have created an Observable as follows and then I emit the values (true or false) when the user signs in or signs out:

export class UserManagementService {
  userSignedIn$: Observable<boolean>;

  constructor(private http: HttpClient, private bs:WebToBackendInterfaceService) {
    this.userSignedIn$ = Rx.Observable.of(false)

  }

  onUserSignout(){
    console.log("In UserManagementService: onUserSignout")
    return this.bs.onUserSignout().subscribe((res/*:ServerResponse*/)=>{
      console.log("response fromm server",res)
      this.userSignedIn$ = Rx.Observable.of(false)
    }); //res is of type HttpResponse
  }

 signinUser(user:UserSigninInfo){
return this.bs.signinUser(user).subscribe((res:HttpResponse<any>)=>{console.log('response from server:',res);
      console.log('response headers',res.headers.keys())
      this.userSignedIn$ = Rx.Observable.of(true)
    } )

}

Then in the component, I subscribe to the observable as follows:

ngOnInit(){

    this.userloggedIn = false;
    this.userManagementService.userSignedIn$.subscribe(x=>{console.log("got stream value ",x);
      this.userloggedIn = x})
...

  }

The above code doesn't work though. I get the very first value emitted by the Observable (corresponding to this.userManagementService.userSignedIn$.subscribe(x=>{console.log("got stream value ",x);) but nothing after that.

I suspect that it could be because I subscribe to the initial Observable but not to the new ones created in the signin and signout functions. How can I solve my problem?

Fan Cheung Fan Cheung · Accepted Answer · 2018-05-22T01:29:42

Observable.of(true) returns a cold observable which cannot emit new values over time.

use Behavior Subject for userSignedIn$ instead

userSignedIn$=new BehabviorSubject();

and when you want to update the signin status use

userSignedIn$.next(true)

How to create an observable?

1 Answers