Angular 5 BehaviorSubject not working for boolean value

Question

I am trying to practice behaviorsubject in angular 5. I am written a small app with two components and want to change the value in both of them at once but the value is not changing. BehaviorSubject should change the value in all the components. Please help me understand.

Service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class TestserviceService {

public isAdmin = new BehaviorSubject<boolean>(false);
cast = this.isAdmin.asObservable();

constructor() { }

changeAdmin(){
  this.isAdmin.next(!this.isAdmin);
}

}

Component One

import { Component, OnInit } from '@angular/core';
import{ TestserviceService } from '../../testservice.service'; 

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']

})
   export class OneComponent implements OnInit {
  isAdmin: boolean;
  constructor(private testservice: TestserviceService) { }


  ngOnInit() {
    this.testservice.cast.subscribe(data => this.isAdmin = data);

  }

  changeValue(){
    this.testservice.changeAdmin();
    console.log(this.isAdmin);
  }

}

Component One html

<button (click)="changeValue()">Click Me</button>
<p>
  one {{isAdmin}}
</p>

Component Two

import { Component, OnInit } from '@angular/core';
import { TestserviceService } from '../../testservice.service';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
    export class TwoComponent implements OnInit {
  isAdmin: boolean;
  constructor(private testservice: TestserviceService) { }


  ngOnInit() {
    this.testservice.cast.subscribe(data => this.isAdmin = data);
    console.log("two "+this.isAdmin);
  }


}

Mauro

try moving that console.log inside your subscribe block in component 2 – Cahoot

Shouldn't this.isAdmin.next(!this.isAdmin); be this.isAdmin.next(!this.isAdmin.value); – Fidele

@Fidele thank you. It works. Pleas add it as an answer. – Mauro

Answer 1

changeAdmin(){
  this.isAdmin.next(!this.isAdmin);
}

Should be

changeAdmin(){
  this.isAdmin.next(!this.isAdmin.value);
}

this.isAdmin is a BehaviorSubject and you were trying to set !thisAdmin which evaluates to false

Stackblitz

Fidele

Answer 2

Change your service to :

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class SharedServiceService {

  constructor() { }
  public isAdmin = new BehaviorSubject<boolean>(false);
  cast = this.isAdmin.asObservable();

  changeAdmin(){
    this.isAdmin.next(!this.isAdmin.value);
  }
}

It should be this.isAdmin.value because this.admin will only be behaviourSubject's object

Live Demo

Cahoot