how to trigger observer.next() on property change

Question

I'm making a simple login-logout app. I have a navbar component whose view template I want to update based on whether user is logged or not. In UserService service class, I have method to logout. My navbar component looks like this:

export class NavbarComponent implements OnInit {
  loginStatus: boolean;
  constructor(private _userService: UserService) { }

  ngOnInit() {
    this._userService.loginStatus().subscribe((data)=>{
      this.loginStatus = data;
      console.log('You are logged in:'+this.loginStatus)
    })
    setTimeout(()=>{
      this._userService.logout();
    }, 10000)// it's just an example for calling logout
  }

}

And UserService:

@Injectable()
export class UserService {
    private _token: string = null;

    set token(token) {
        localStorage.setItem('token', token);
        this._token = token;
        this.loggedIn = true;
    }
    get token() {
        if (this._token) {
            return this._token;
        }
        return this._token = localStorage.getItem('token');
    }
    private loggedIn: boolean = true;
    constructor(private _httpClient: HttpClient) { }

    logout(){
        console.log('out')
        this._token = null;
        this.loggedIn = false;
        localStorage.removeItem('token');
        localStorage.clear();
    }
    loginStatus(): Observable<boolean>{
        let observable: Observable<boolean> =  new Observable((observer) => {
            observer.next(this.loggedIn);
        })
        return observable;
    }
}

loginStatus() returns an observable which I have subscribed in Navbar component. Now problem is when I log out by using logout method, I want loginStatus() method to emit data again. How can I apply any change detection to loggedIn property so that observable emit data. If you know any other way, you can suggest me. Thankyou.

José Antonio Postigo José Antonio Postigo · Accepted Answer · 2019-02-22T08:26:18

Why don't you use a Subject?

public loginStatus: Subject<boolean> = new Subject<boolean>();

(you can also make it private with its getter...). You subscribe to it like an observable, and then execute:

loginStatus.next(this.loggedIn);

everytime the login status changes

how to trigger observer.next() on property change

1 Answers