Subject VS Behaviorsubject VS Replaysubject in Angular

Subject vs BehaviorSubject vs ReplaySubject in Angular

It really comes down to behavior and semantics. With a

Subject - a subscriber will only get published values that were emitted after the subscription. Ask yourself, is that what you want? Does the subscriber need to know anything about previous values? If not, then you can use this, otherwise choose one of the others. For example, with component-to-component communication. Say you have a component that publishes events for other components on a button click. You can use a service with a subject to communicate.
BehaviorSubject - the last value is cached. A subscriber will get the latest value upon initial subscription. The semantics for this subject is to represent a value that changes over time. For example a logged in user. The initial user might be an anonymous user. But once a user logs in, then the new value is the authenticated user state.
The BehaviorSubject is initialized with an initial value. This is sometimes important to coding preference. Say for instance you initialize it with a null. Then in your subscription, you need to do a null check. Maybe OK, or maybe annoying.
ReplaySubject - it can cache up to a specified number of emissions. Any subscribers will get all the cached values upon subscription. When would you need this behavior? Honestly, I have not had any need for such behavior, except for the following case:
If you initialize a ReplaySubject with a buffer size of 1, then it actually behaves just like a BehaviorSubject. The last value is always cached, so it acts like a value changing over time. With this, there is no need for a null check like in the case of the BehaviorSubject initialized with a null. In this instance, no value is ever emitted to the subscriber until the first publishing.

So it really comes down to the behavior you are expecting (as for which one to use). Most of the time you will probably want to use a BehaviorSubject because what you really want to represent is that "value over time" semantic. But I personally don't see anything wrong with the substitution of ReplaySubject initialized with 1.

What you want to avoid is using the vanilla Subject when what you really need is some caching behavior. Take for example you are writing a routing guard or a resolve. You fetch some data in that guard and set it in a service Subject. Then in the routed component you subscribe to the service subject to try to get that value that was emitted in the guard. OOPs. Where's the value? It was already emitted, DUH. Use a "caching" subject!

What is the difference between Subject and BehaviorSubject?

A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn't hold a value.

Subject example (with RxJS 5 API):

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

Console output will be empty

BehaviorSubject example:

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Console output: 1

In addition:

BehaviorSubject should be created with an initial value: new Rx.BehaviorSubject(1)
Consider ReplaySubject if you want the subject to get previously published values.

When to use Subject, BehaviorSubject with real example

Here is a practical example and little explanation. let's say you have an application with many components e.g.: shopping cart , you have a navigation bar showing items added to the cart. you have products page, grid of items with many add to cart button. product detail page where you have one add to cart button for that product. and finally the order summary page(i.e. the cart page where you have buttons against each product in the list to add + or remove -.
In the above scenario you can use Subjects or BehaviorSubject on the cartService. and all other components subscribing to it via service dependency injection. The add to cart button will invoke the next() function of the service.
In case you want the cart to be pre-populated from the browser local storage (or other mechanism) when the user has left the session by just selecting the items into the cart but did not complete the transaction process. You may use BehaviorSubject to do that initial load to cart.

To extend what @Harun Yilmaz wrote, user logged in status had to be checked from different part of the single page application in that case you can use accordingly, to check if the login status of the user is still valid.

Do not get confused with web streaming and message streaming. message streaming works in conjunction with streams of events. please don't get it wrong. eg: web streaming is where you eg: socket where you make a connection first and then exchange packets of data like streaming.

In angular too it works similar you make a connection by subscribing to the asObservable(). exchange data like streams of message. A BehaviorSubject sends you a welcome message while subject do not send any message until next() is called

You go to a restaurant and the waiter greets you proactively BehaviorSubject waiter greets (how may i help you) you when you call Subject all waiters on the floor are providing service subscribed by the restaurant owner.

hope this helps to understand

UPDATED on 22/06/2020

above mentioned topics are related to reactive programming. which means the application shroud react to a event. events can default browser events like click mouesevent or any custom event that can be emitted. eg. when user do add to cart, place order. It is called reactive because events are uncertain and we do not know when it is going to happen. eg. you subscribe to a youtube channel because you don't know when the creator will post a new video, so you set a kind of event watcher. which will constantly look for that event to occur.

so if i create a sample single page youtube application with no server involved. You will have a creatorcomponent , viewercomponent , publishService.
when the creator publishes a video or releases it, it calls the publishService and wires a message 'new_video_published' who ever are subscribing to this creator will receive the notification and viewerComponent gets to know it.

now if the publishService uses a BehaviorSubject to do the message passing the new subscriber (viewer) will immediately get the latest video released by that creator. If the punlishService uses Subject the new subscriber will not get any immediate message but all messages going forward.

publish.service.ts

... other code ...

    subscribeMes$ = new Subject<string>(); 
    //OR
    //subscribeMeb$ = new BehaviorSubject<string>('Welcome Message'); 

newPublish(srting) {
        this._name.next(string);
      }

viewer.component.ts

   //injecting service
subscribedOn_21022020(){
    this.publishService.subscribeMes$.subscribe(n=>{
     this.newVideo =n
    })
}

subscribedOn_23022020(){
    this.publishService.subscribeMes$.subscribe(n=>{
     this.newVideo = n
    })
}

creator.component.ts

this.publishService.newPublish('new video on Rxjs on 22/02/20')

in the above sample we see that when the application first loads on 21-02-2020 in the browser as there no video published(hypothetical event scenario) . the subscribedOn_21022020() will not receive any welcome message when the publish.service.ts uses Subject. In case BehaviorSubject was used they would have received the Welcome message. On 22/02/2020 the creator publishes a video so the subscribedOn_21022020() will receive the new video message ,( in case of BehaviorSubject it would have been be his second message). Now on 23-02-2020 a second user subscribe subscribedOn_23022020() today he will not receive any message immediately but will get new video publish notification anytime in the future as the publish service uses Subject. In case BehaviorSubject was used the second subscriber would have got the 'new video on Rxjs on 22/02/20' message immediately after subscription. and continue to get future videos.

BehaviorSubject vs Observable?

BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are:

It needs an initial value as it must always return a value on subscription even if it hasn't received a next()
Upon subscription, it returns the last value of the subject. A regular observable only triggers when it receives an onnext
at any point, you can retrieve the last value of the subject in a non-observable code using the getValue() method.

Unique features of a subject compared to an observable are:

It is an observer in addition to being an observable so you can also send values to a subject in addition to subscribing to it.

In addition, you can get an observable from behavior subject using the asObservable() method on BehaviorSubject.

Observable is a Generic, and BehaviorSubject is technically a sub-type of Observable because BehaviorSubject is an observable with specific qualities.

Example with BehaviorSubject:

// Behavior Subject

// a is an initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe(value => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

Example 2 with regular subject:

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe(value => {
  console.log("Subscription got", value); // Subscription won't get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d

An observable can be created from both Subject and BehaviorSubject using subject.asObservable().

The only difference being you can't send values to an observable using next() method.

In Angular services, I would use BehaviorSubject for a data service as an angular service often initializes before component and behavior subject ensures that the component consuming the service receives the last updated data even if there are no new updates since the component's subscription to this data.

Access values of Behavior Subject

if you want to get the values from BehaviorSubject directly - you need to call BehaviorSubject.value.

so you can expose to method in your service:

private _items$ = new BehaviorSubject<T[]>([]);
get items$() {
  return this._items$.asObservable();
}
get items() {
   return this._items$.value;
}

Differentiate between Observables, Subjects, ReplaySubjects, Behaviour Subjects?

You can picture them all as streams.

Observable: Subscribe to it to get the values
Subject: Same but you also have control of the values that you want to emit into it (can subscribe to it but also emit)
ReplaySubject: Same as subject but will keep track of the N latest emitted values and every time you subscribe to it, it'll emit those N values
BehaviorSubject: Subject where you have to set a default value, if you subscribe to it before anything has been emitted you'll get the default value

Observable and Subject: If you emit a value and subscribe to one of them after that, you'll not get the latest value emitted, you'll have to wait for a new value to be emitted before you're notified

ReplaySubject and BehaviorSubject: Even if you emit a value and then subscribe to one of them, you'll directly get the latest emitted value as soon as you subscribe.

Subject VS Behaviorsubject VS Replaysubject in Angular