Sharing Top Content from the Angular-sphere.

Cold vs Hot Observables by thoughtram

  • If we turn back to the definition that we cited in the beginning and think about what makes an Observable cold or hot, we can read between the lines and notice that if was cold it should produce fresh values upon subscription.
  • In other words, the Observable started producing the values upon each subscription which makes it cold by definition.
  • When we subscribe to such a hot Observable, we don’t see past values but only new ones that were generated after our subscription.
  • An iced cold Observable starts reproducing the values it emits independently with every new subscriber as we’ve seen in the examples above.
  • With all our knowledge regarding cold and hot Observables we should be able to simply fix our Observable so that it shares one single subscription to the underlying source – the Observable that issues the HTTP call.

In this article we are going to demystify what the term hot vs cold means when it comes to Observables.

One of the most exciting topics around Angular is its relationship to Observables. It’s such an essential part of the framework that we cover a fair amount of Observable knowledge in our Angular Master Class. That said, the topic is so big that one could easily run a 3-day workshop on Observables itself.

There’s one particular area of Observables that we don’t explicitly touch on in our workshop but that keeps coming up in questions every single time that we teach them.

Want to see things in action first?

Understanding the nature of hot and cold Observables is a crucial part to master Observables. Before we try to explore the topic through some practical examples, let’s read through the definition from the RxJS project itself:

Ok, so far so good. Let’s see what that means in practice.

We start with a basic Observable that simply emits the number . We make two independent subscriptions to the same Observable and print out the output with a prefix so that we can tell them apart.

When we run this code we’ll see the following output in the console.

Ok, cool. But the interesting question remains: is cold or hot? Let’s forget for a moment that we know how was created and imagine we would have obtained a…

Cold vs Hot Observables by thoughtram