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.
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);
}
}
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);
}
}
<button (click)="changeValue()">Click Me</button>
<p>
one {{isAdmin}}
</p>
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);
}
}
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.
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.
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.
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With