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

2 Answers

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