In this article we review how to use BehaviorSubject in Angular 12 : and also the differences between Observable VS Subject VS BehaviorSubject.
Using BehaviorSubject in Angular 12 : differences between Observable VS Subject VS BehaviorSubject
However, BehaviorSubject allows you to control the messages as well, and emit messages at observer's will!!
That way, Subjects are like EventEmitters: they maintain a registry of many listeners.
Upon subscription, BehaviorSubject returns the last value kept. However, a regular Observable or a Subject, only trigger when they receive an "NEXT" operation.
For this sake, BehaviorSubject needs a DEFAULT value upon creation, as it must always return a value on SUBSCRIPTION TIME , even if it hasn't received a "NEXT" operation call.
For this sake, BehaviorSubject needs a DEFAULT value upon creation, as it must always return a value on SUBSCRIPTION TIME , even if it hasn't received a "NEXT" operation call.
We can retrieve the last value of the subject in a regular non-observable code by using the getValue() method.
The difference between an Observable and a Subject is that it is an observer in addition to being an observable : you can also edit and emit and send values from a Subject in addition to subscribing to it.
Behavior subject can be turned into observable using the asObservable() method on BehaviorSubject.
The difference between an Observable and a Subject is that it is an observer in addition to being an observable : you can also edit and emit and send values from a Subject in addition to subscribing to it.
Behavior subject can be turned into observable using the asObservable() method on BehaviorSubject.
This is a BehaviorSubject example: DEFAULT VALUE + IMMEDIATE MESSAGE ON SUBSCRIPTION:
let bs= new BehaviorSubject("1");
bs.next("2");
bs.subscribe(value => {
console.log("Value received : ", value);
// Subscription got 2 !!!!!!!!!! However, an observable or subject wouldn's have send a message at this stage
});
bs.next("3"); // Subscription got 3
bs.next("4"); // Subscription got 4
And this is an example of Subject: NO DEFAULT, NO MESSAGE UNTIL "NEXT" method triggered:
let s= new Subject();
s.next("2");
s.subscribe(value => {
console.log("Value received :", value);
// Subscription wont get any message at this point
});
s.next("3");
s.next("4");
Example of BehaviorSubject use:
Following is an example of using BehaviorSubject: here is the app to try
These TWO components pass data one another using a BehaviorSubject from a Service:
1) First, we define the BehaviorSubject on some Service:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class MyService {
constructor() {}
private bs = new BehaviorSubject<string>('default');
obs$ = this.bs.asObservable();
editData(newData) {
this.bs.next(newData);
}
}
2) Then, we use it on an OBSERVER Component, like this :
import { Component, OnInit } from '@angular/core';
import { tap } from 'rxjs/operators';
import { MyService } from '../services/my.service';
@Component({
selector: 'my-two',
templateUrl: './two.component.html',
styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit {
data: string;
newData: string;
tapData: any;
constructor(private svc: MyService) {}
ngOnInit() {
this.svc.obs$
.pipe(tap(d => (this.tapData = d)))
.subscribe(d => (this.data = d));
}
UpdateData(user) {
this.svc.editData(this.newData);
}
}
3) Then, we use on the template HTML is as follows :
<p>
Data received on Component TWO : {{data}}
</p>
JSON = {{data | json}}
4) The PUBLISHER will be the component ONE:
import { Component, OnInit } from '@angular/core';
import { MyService } from '../services/my.service';
@Component({
selector: 'my-one',
templateUrl: './one.component.html',
styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {
data: string;
newData: string;
constructor(private svc: MyService) {}
ngOnInit() {
// receive data back:
this.svc.obs$.subscribe(d => (this.data = d));
}
UpdateData() {
// send updated data
this.svc.editData(this.newData);
}
}
<p> Data sent from component ONE : <br />
{{data}}
</p>
<input [(ngModel)]="newData"/>
<button (click)="UpdateData();">Update Data</button>
5) And both components will be used on the App.Component :
<p>
Publish Data from Component ONE to Component TWO
</p>
<my-one></my-one>
<my-two></my-two>
This way, both components are interconnected and pass the data on the fly each another.
( See the code on stackblitz.com )
That's All!!!
This post was about BehaviorSubject in Angular 12 : differences between Observable VS Subject VS BehaviorSubject.
Enjoy Angular.....
by Carmel Schvartzman
כתב: כרמל שוורצמן
by Carmel Schvartzman
כתב: כרמל שוורצמן
