Problem with RxJs user BehaviorSubject not notified of cost changes

Question

I am trying to use an RxJS BehaviorSubject that contains a boolean representing whether or not the user is connected in the application.

Here is the component that subscribes to the new BehaviorSubject ie true when the user is authenticated:

 import {Component, OnInit} from '@angular/core'; import {CollapseDirective} from 'ng2-bootstrap'; import {PublicNavbarComponent} from './public.navbar.component'; import {PrivateNavbarComponent} from './private.navbar.component'; import {SessionService} from '../../session/session.service'; @Component({ selector: 'navbar', templateUrl: 'app/shared/components/navbar.component.html', providers: [SessionService], directives: [PublicNavbarComponent, PrivateNavbarComponent, CollapseDirective] }) export class NavbarComponent implements OnInit { constructor(private sessionService:SessionService) { } ngOnInit() { this.sessionService.authenticated$.subscribe({ next: (value)=> this.isAuthenticated = value }); } isAuthenticated:boolean = false; isCollapsed:boolean = true; } 

Here is the class / service containing the BehaviorSubject :

 import {Injectable} from '@angular/core'; import {Http, Headers, RequestOptions} from '@angular/http'; import {Credentials} from '../shared/models/credentials.model'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import 'rxjs/Rx'; @Injectable() export class SessionService { authenticated$:BehaviorSubject<boolean> = new BehaviorSubject(false); currentUserAccount; constructor(private http:Http) { } signin(credentials:Credentials) { let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}); let options = new RequestOptions({headers: headers}); this.http.post('/api/signin', 'username=' + credentials.username + '&password=' + credentials.password, options) .subscribe(response=> this.setPersonalInfo(response.headers.get('x-auth-token')) ); } setPersonalInfo(sessionToken) { localStorage.setItem('authenticated', 'true'); localStorage.setItem('sessionToken', sessionToken); this.authenticated$.next(true);//next() from false to true this.http.get('/api/utils/current-useraccount') .subscribe(param => this.currentUserAccount = param); } } 

However, this does not have the expected behavior: it seems that authenticated$ from the session service is only valid in the setPersonalInfo function, and isAuthenticated from NavbarComponent is not notified at all when this.authenticated$.next(true) called.

Answer 1

It seems that you have multiple instances of SessionService . for example, you provided it more than once, and the instance that you call signin in is not the instance that you entered in the NavbarComponent .

It depends on your project, how you provide your services. Typically, session services are single. I recommend removing providers: [SessionService], from NavbarComponent .

Answer 2

I usually provide a SessionService at boot time (rather than using providers: [] ) to provide a common common one global SessionService instance throughout the application.

 bootstrap(AppComponent, [SessionService]);