Hot and Cold Observables

Hot Observables

How can an Observable be hot? How can it be cold? Well, there is a distinction between when an Observable is considered hot and when it is considered cold.


A hot Observable is when the data that the Observable exposes is created outside the Observable.


Suppose, we have an Observable that is returning data from a backend service, maybe using an API, and this Observable emits the data as soon as it accesses it. If the call to load the data from the API is made outside of the Observable, then at the time this Observable is created, the data is already there, ready for the Observable to send. Such an Observable is considered hot.

Example: click event

An example of a hot Observable is an Observable that’s created from a click event. This is considered hot because the click event data exists outside of the Observable, and the click event is created by clicking an element on the page. If there isn’t a subscriber for this click event, the event is still fired, but nothing happens; the event is just lost.

📝 Note: Press the RUN button to compile and serve the application. Once the app compiles, click on the URL given after Your app can be found at, and see what happens!

Get hands-on with 1200+ tech skills courses.