Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 BehaviorSubject not working for boolean value

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


}
like image 962
Hasan Zubairi Avatar asked Mar 27 '18 11:03

Hasan Zubairi


People also ask

How to set the initial value in behavior subject in angular?

In Behavior Subject we can set the initial value . Create an Angular project by using the following command. Open this project in Visual Studio Code and install Bootstrap by using following command. Now open styles.css file and add Bootstrap file reference.

What is behaviorsubject in Angular 2?

A BehaviorSubject = a set/ stream of data a subscriber (consumer) can subscribe to. The subscriber can see the NEW data in the stream and also the initial or the LAST value in the stream. If you don't want to see the last value of the stream you have to use Subject in Angular.

How to send data from one component to other components using angular?

We can send data from one component to other components using Behavior Subject. In Behavior Subject we can set the initial value . Create an Angular project by using the following command. Open this project in Visual Studio Code and install Bootstrap by using following command. Now open styles.css file and add Bootstrap file reference.

What is a behaviorsubject or a subject?

In this situation we have to define a Subject or a BehaviorSubject. A BehaviorSubject = a set/ stream of data a subscriber (consumer) can subscribe to. The subscriber can see the NEW data in the stream and also the initial or the LAST value in the stream.


2 Answers

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

like image 32
user1608841 Avatar answered Sep 22 '22 00:09

user1608841


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

like image 130
cyberpirate92 Avatar answered Sep 19 '22 00:09

cyberpirate92