One of the main parts of any Angular application is the components. Normally each component takes care of only one aspect of the application, so in larger projects, you could end up with quite a few of them.
Despite their single-responsibility nature, they are not isolated structures. They need to send data to other components/services and also receive it. And that's where the concept of Observables from RxJS comes in handy.
They are one of the ways of sharing data between components.
How do you do that?
An Observable is an object you can subscribe to, so you receive new values when they are emitted.
Think about a newsletter that you get on your email. You subscribe to a certain topic and every time a new email is sent about that topic, you get the email too.
That's the same concept with Observables. Each one will emit a certain type of data, and you can subscribe to them, so you receive updates from that Observable.
To emit new values, you can use another feature of RxJS called Subject.
A Subject is a special type of Observable that can be multicasted to several observers simultaneously.
Types of Subjects
Currently, there are 5 types of Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject, and VoidSubject.
Subject is the father of them all, the other ones are variations.
We will talk about 3 of them, which I have used the most.
Subject
You can create a Subject and have multiple ‘listeners’ subscribing to it at the same time, so when a new value is emitted, all of them will receive the same value.
BehaviorSubject
This is the one I’ve used the most when passing data through components.
It works almost in the same way as the Subject. The difference is that the moment you subscribe to it, besides receiving the next values, you also immediately receive the last value emitted.
This is useful when you want to know the current/latest value when you subscribe.
Say for example that you are passing data from component A to component B, and you have a BehaviorSubject on a shared-state.service. For example, it could be a search filter.
On the state service you might have something like this:
Then say on component A you push a value ‘userId=2’ to this subject.
Now you can go to component B and subscribe to this subject. When you do, you will receive this ‘userId=2’ value immediately.
As long as this subscription remains active, you will also receive new values emitted.
VoidSubject
I haven’t used this one as much as the others, but it can be quite useful in the right circumstances.
As the name implies, a VoidSubject is of type void. Which means it emits an event, but with no value.
For that, just create a regular Subject, with a void type. You don't have to pass any parameter when you call its emit() function.
But Bruno, why would I want something that does not emit a value?
You use that when you don’t care about the value, you just want to know when something happens, like an action from the user, or when some processing finishes, for example.
What now?
Now, to know more about Observables and how they help us in our daily activities, I highly recommend you check out the source material on the RxJS page. There is a lot of great information there.
Top comments (0)