# HOT vs COLD Observables in Angular

Paul Tomoiu

●

Angular,

frontend,

web

●

Published 2022-12-03

This tutorial explains to you the difference between a HOT and a COLD Observable in Angular.

An Observable can have 2 behaviors:

a) when a subscriber subscribe to it, the subscriber receive a set of data. For receiving new data, you need to subscribe again to it.

b) when a subscriber subscribe to it, the subscriber receive data continuously (when data stream change). For receiving new data, you don't need to subscribe again to the observable.

In the case a) we speak about a COLD Observables;

In the case b) we speak about a HOT Observables;

Here it is the code for a COLD Observables:

app.component.ts
/*  app.component.ts  */
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  
  products = [
    {name:"apples", price:10, onStock:"Y"},
    {name:"bananas", price:5, onStock:"Y"},
    {name:"tomatoes", price:11, onStock:"Y"}
  ];
  
  ngOnInit() {
      
    /* An Observable = a set/ stream of data a subscriber(consummer) can subscribe to.
       The subscriber can see the data source of the Observable when the subscription is done.
       You cannot see the future modification of the source.
    */
    console.log('OBSERVABLES:');
    let obs1 = Observable.from(this.products);
  
    let subscription11 = obs1.subscribe( var1  => {
      console.log('subscription11 /'+var1.name+'/');
    });
    console.log('-----------------------------------');
    this.products.push({name:"potatoes", price:10, onStock:"Y"});
  
    let subscription12 = obs1.subscribe( var2  => {
      console.log('subscription12 /'+var2.name+'/');
    });
    console.log('===================================');
  }  
}

Here it is the code for a HOT Observables:

app.component.ts
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  
  products = [
    {name:"apples", price:10, onStock:"Y"},
    {name:"bananas", price:5, onStock:"Y"},
    {name:"tomatoes", price:11, onStock:"Y"}
  ];
  
  ngOnInit() {
  
    console.log('BehaviorSubject:');
    let subject3 = new BehaviorSubject<number>(0);
  
    let subscription31 = subject3.subscribe( var1  => {
      console.log('subscription31 /'+var1+'/');
    });
    console.log('-----------------------------------');
    subject3.next(1);
    console.log('CurrentValue='+subject3.getValue());
    console.log('-----------------------------------');
    let subscription32 = subject3.subscribe( var2  => {
       console.log('subscription32 /'+var2+'/');
    });
    subject3.next(2);
    console.log('===================================');
 }
}

Info

Angular HttpClient.post uses cold observables to send data and repeats whenever you make a call.
A HOT Observable begin emitting data on the stream as soon as it is created and so any observer who later subscribes to that Observable may start observing the sequence somewhere in the middle.
A COLD Observable, waits until an observer subscribes to it before it begins to emit data/ values.