BehaviorSubject is a subject that releases the last value released by the source Observable.
Observable is used to release values over time.
Angular operates them to control events or data streams, such as HTTP requests or user input. They are also generally used when an observer needs to be informed of the object’s state changes.
Difference Between BehaviorSubject and Observable:-
BehaviorSubject is Angular observable with defined attributes; it is theoretically a sub-type of Observable; Observable is generic. A subject can be used to begin an Observable with the help of BehaviorSubject.
You can’t use the next() method to return data to an observable.
Observable:
In an Angular application, RxJS renders observables; observables enable data sharing between authors and users.
1. It is a better process for event management, asynchronous computing, and managing multiple features.
2. They can only be controlled by a user who has subscribed to them like a component is not executed by the subscribed consumer. The user can only acquire updates until they have subscribed.
Mostly, the subject is executed in three ways, each of which renders different capabilities and can be involved in different applications.
BehaviorSubject: It is the one that stores the existing value. An observer who subscribes to BehaviorSubject will get a value over time as it does so.
ReplaySubject: This object keeps track of all the values that have been pushed. It spreads all of the items released by the source to all observers that have subscribed to it.
AsyncSubject: It saves the most recent value and communicates it whenever the sequence is finished.
BehaviorSubject:
One of the variants of the Subject is the BehaviorSubject. The BehaviorSubject has the characteristic that it stores the “existing” value. This suggests that you can always instantly get the last released value from the BehaviorSubject.
There are two ways to get this last released value. You can either get the value by accessing the .value property on the BehaviorSubject or you can subscribe to it. If you subscribe to it, the BehaviorSubject will instantly release the existing value to the subscriber. Even if A subscribes much later than the value was stored.
import * from "rxjs";
const behaviorSubject = new BehaviorSubject();
behaviorSubject.subscribe((d) => {
console.log('A subscribed:', d);
});
behaviorSubject.next(Math.random());
behaviorSubject.next(Math.random());
behaviorSubject.subscribe((d) => {
console.log('B subscribed:', d);
});
behaviorSubject.next(Math.random());
console.log(behaviorSubject.value);
There are a few things happening here:
1: We first began a behaviorSubject and subscribe to that with A. The behaviorSubject then releases its value and A will log the random number.
2: The behaviorSubject released its next value. A will log this again. B starts by subscribing to the behaviorSubject. Since the behaviorSubject is a BehaviorSubject the new subscriber will automatically accept the last stored value and log this.
3: The behaviorSubject released a new value again. Now both A and B will accept the values and log them.
4: Lastly, we logged the existing behaviorSubject's value by just accessing the value property. This is especially nice as it’s synchronous. You don’t have to contact subscribe to get the value.
You can begin BehaviorSubjects with a beginning value. When beginning Observables this can be especially hard. With BehaviorSubjects this is as easy as handing along an initial value.
import * from "rxjs";
const behaviorSubject = new BehaviorSubject(Math.random());
behaviorSubject.subscribe((d) => {
console.log('A subscribed:', d);
});
ReplaySubject
The ReplaySubject is similar to the BehaviorSubject in the way that it can transmit “old” values to new subscribers. It however has the additional characteristic that it can record a part of the observable performance and therefore store multiple old values and “replay” them to new subscribers.
When beginning the ReplaySubject you can decide how many values you want to store and for how long you want to store them. In other words, you can determine: “I want to store the last 5 values that have been executed in the last second prior to a new subscription”.
import * from "rxjs";
const replaySubject = new ReplaySubject(2);
replaySubject.subscribe((d) => {
console.log('A subscribed:', d);
});
replaySubject.next(Math.random())
replaySubject.next(Math.random())
replaySubject.next(Math.random())
replaySubject.subscribe((d) => {
console.log('B subscribed:', d);
});
replaySubject.next(Math.random());
A few things are happening here:
-
We began a ReplaySubject and decide that we just want to store the previous 2 values
-
We began subscribing to the replaySubject with A
-
We ran three new values via the replaySubject. A will log all three.
-
We begin subscribing with B. Since we told the ReplaySubject to store 2 values, it will instantly release those last values to B and B will log those.
-
The replaySubject released another value. This time both A and B just log that value.
As mentioned before you can also decide for how long you want to store values in the replay subject.
import * from "rxjs";
const replaySubject = new ReplaySubject(2, 100);
replaySubject.subscribe((d) => {
console.log('A subscribed:', d);
});
setInterval(() => replaySubject.next(Math.random()), 200);
setTimeout(() => {
replaySubject.subscribe((d) => {
console.log('B subscribed:', d);
});
}, 1000);
Again, a few things are happening here.
-
We began the ReplaySubject and decided that we only want to store the last 2 values, but no longer than a 100 ms
-
We began subscribing with A
-
We began releasing replaySubject values every 200 ms. A will pick this up and log every value that’s being released by the replaySubject.
-
We began subscribing with B, but we do that after 1000 ms. This suggests that the replaySubject has already released 5 values before we begin subscribing. When we began the replaySubject we defined that we wanted to store max 2 values, but no longer than 100ms. This suggests that after 1000 ms, when B starts subscribing, it will only accept 1 value as the replaySubject releases values every 200ms.
AsyncSubject
While the BehaviorSubject and ReplaySubject both store values, the AsyncSubject operates a bit differently. The AsyncSubject is a subject variant where only the last value of the Observable performance is sent to its subscribers, and only when the performance completes.
import * from "rxjs";
const asyncsubject = new AsyncSubject();
asyncsubject.subscribe((d) => {
console.log('A subscribed:', d);
});
asyncsubject.next(Math.random());
asyncsubject.next(Math.random());
asyncsubject.next(Math.random());
asyncsubject.subscribe((d) => {
console.log('B subscribed:', d);
});
asyncsubject.next(Math.random());
asyncsubject.complete();
This time there’s not a lot happening. But let’s go over the steps:
-
We began the AsyncSubject
-
We subscribed to the asyncSubject with A
-
The asyncSubject released 3 values, but still, nothing is happening
-
We subscribed to the asyncSubject with B
-
The asyncSubject released a new value, but still, nothing is happening
-
The asyncSubject satisfied. Now the values are released to the A and B who both log the value