Cold observable vs hot observable

Cold observable

What happens if the subscription was done after the observable already emitted some value?

export class AppComponent implements OnInit, OnDestroy {
  title = 'angular-basic';

  // `Observable` type which emits `number` data streams
  observable: Observable<number>;

  // subscription variable to hold observable subscription
  // this is needed to dispose/destroy subscription whenever we need
  subscription: Subscription;

  secondSub: Subscription;

  ngOnInit(): void {
    // initializing an observable
    this.observable = new Observable(subscriber => {
      // emitting next value
      subscriber.next(101);
      // emitting value 5 after 5 seconds
      setTimeout(() => subscriber.next(5), 5000);
      subscriber.next(1);
      setTimeout(() => subscriber.next(2), 1000);
      setTimeout(() => subscriber.next(3), 2000);

      setTimeout(() => {
        // after 7 seconds emitting value 66
        subscriber.next(66);
        // after 7 seconds completing the observable meaning observable is done emitting the value
        subscriber.complete();
      }, 7000);

      setTimeout(() => {
        // after 6 seconds sending error
        // meaning the observable never gets to complete
        subscriber.error('an error occurred!!');
      }, 6000);
    });

    this.subscription = this.observable.pipe(
      map(v => v * 2),
      filter(v => v < 100)
    ).subscribe({
      next(val) {
        console.log(`next val is ${val}`);
      },
      error(err) {
        console.log(`something went wrong: ${err}`);
      },
      complete() {
        console.log('completed');
      }
    });

    setTimeout(() => {
      this.secondSub = this.observable.pipe().subscribe({
        next(val) {
          console.log(`from second sub next val is ${val}`);
        },
        error(err) {
          console.log(`from second sub something went wrong: ${err}`);
        },
        complete() {
          console.log('from second sub completed');
        }
      });
    }, 2000)

  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
    this.secondSub.unsubscribe();
  }
}

Here, we see that each value is emitted independently for each subscription. This is Cold Observable.

Cold Observable doesn’t guaranty it will produce same exact result for different subscription. Example, HttpRequest

Hot observable

• Unlike cold observable’s subscription, hot observable’s subscriptions share the same source (Eg, Dom Event)