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: './oneponent.html',
  styleUrls: ['./oneponent.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: './twoponent.html',
  styleUrls: ['./twoponent.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);
  }


}

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);
  }


}

• javascript
• angular
• angular5
• behavior

• try moving that console.log inside your subscribe block in component 2 – user1608841 Commented Mar 27, 2018 at 11:34
• 1 Shouldn't this.isAdmin.next(!this.isAdmin); be this.isAdmin.next(!this.isAdmin.value); – cyberpirate92 Commented Mar 27, 2018 at 11:35
• @cyberpirate92 thank you. It works. Pleas add it as an answer. – Hasan Zubairi Commented Mar 27, 2018 at 11:49

2 Answers 2

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

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