Subject and Behavioural subject in Angular

Subject use case : it is used to communicate between two different component where both the component don`t have any relationship.

Let say we have a requirement where we want to send data from child component of component 3 to component1 so as here there is no direct child parent relationship so we will use the subject to communicate the data.

As we know, in observable , we subscribe to it or transform data using the pipeable operator and in other hand in case of observer we emit the next value or error or completion of stream of data.

But in case of subject, it is special type where we can subscribe to it or emit data out of it. So it behaves as a observable and observer.

In case of child to parent component communicate, we had used the event emitter but in case of subject we do it through the next method of observable. We can emit data to the component or the service.

Subject has also feature of multicasting, which means we will get the data from the place where we subscribe to it.

In case of observable, we get data one by one from start which is non multicasting but in case of subject, it is multicasting in nature which means we get data from the point from where we subscribe.

For example — we are watching live stream video, so we get data from the point from where we started watching and not the from the beginning.

Now we will implement the subject in our project, we have a subject component and three other components

Here for demonstrating subject example, we will create a service where we will define a variable as subject as shown below.

Now we will subscribe to it in all the component to get the data emitted from it by injecting the service and then subscribing to the username

Same is done in comp 2 and comp 3

Now whenever let see one of the component

Here we have a input and button, so on clicking on the change value button we will take the value from the input and then pass it username field

This can be easily done by assinging the username variable with the input value, but we also want to emit this input value,

So we will subscribe to the service and emit the username value using next function as shown below. In this way, all the other component will receive the next value as they have also subscribed to it.

The other component will get this next value as we have subscribed to it in the other component

Now on the screen when we change value in one component, the value in all the component will change

Now coming to behavioural subject. In behavioural subject we can set the initial value but in case of subject we cannot set the initial value.

In the above code, we have defined a behavioural subject where we have set the initial value to Akash and it is initial emitted to all the component.

Thank you for reading.