RxJS 7 - Types of Observables
Tags: rxjs, webdev, javascript, angular
Published: 2023-03-20 09:27:05

_Here are my detailed notes from the fantastic course created by Jurek Wozniak, called [RxJS 7 and Observables: Introduction](https://www.udemy.com/course/rxjs-and-observables/)._

_In order to understand the concept please consider buying the course yourself, these notes are simply subsidiaries_

# Types of Observables

If an observable has a defined set of possible values, or if its value is related to the interval it is in and changes based on defined rules we call it cold observables.

If an observable’s value based on user’s actions for example a dom event or mouse position we call it hot observable

An http request is also counted as a cold observable.

The main rule that seperates cold observables from the hot ones is, if each observation occurs independent from each other or not

It doesn’t have to contain the same events for each subscription, in our example we will send an http request to a random api, and even though the response we receive changes, because of the whole process was independent per each subscription we call it a cold observable

## Cold Observable

```tsx
import { ajax } from "rxjs/ajax";

const ajax$ = ajax<any>('https://random-data-api.com/api/name/random_name');

ajax$.subscribe(
  data => console.log('Sub 1:', data.response.first_name)
);

ajax$.subscribe(
  data => console.log('Sub 2:', data.response.first_name)
);

ajax$.subscribe(
  data => console.log('Sub 3:', data.response.first_name)
);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acxzyx2tg7s0ou47jlsi.png)


## Hot Observables

In the hot observables, observables are connected to the same resource, therefore effected by each other.

For example a dom event like resizing a window would effect all the observer listening that observable

```tsx
import { Observable } from 'rxjs';

const helloButton = document.querySelector('button#hello');

const helloClick$ = new Observable<PointerEvent>((subscriber) => {
  helloButton.addEventListener('click', (event: PointerEvent) => {
    subscriber.next(event);
  });
});

helloClick$.subscribe((event) =>
  console.log('Sub 1', event.type, event.x, event.y)
);

helloClick$.subscribe((event) =>
  console.log('Sub 2', event.type, event.x, event.y)
);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56u503oai5tznn7tiujc.png)


We can also subscribe another observer after a while

```tsx
import { Observable } from "rxjs";

const helloButton = document.querySelector('button#hello');

const helloClick$ = new Observable<MouseEvent>(subscriber => {
  helloButton.addEventListener('click', (event: MouseEvent) => {
    subscriber.next(event);
  });
});

helloClick$.subscribe(
  event => console.log('Sub 1:', event.type, event.x, event.y)
);

setTimeout(() => {
  console.log('Subscription 2 starts');
  helloClick$.subscribe(
    event => console.log('Sub 2:', event.type, event.x, event.y)
  );
}, 5000);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aorwwogdg9baupzcpxvo.png)


## Hot vs Cold

**Cold:** Produces the data inside

New subscriber → new data

********Hot:******** Multicasts the data from a common source

All subscribers → common data

Observers can change their behaviour with time a hot observer can be a cold one

## Let's keep in touch

Hey, thanks a lot if you read it so far.
I want you to keep in touch for more sweet content.
Please subscibe in Dev.to and other channels (🦸‍♂️ especially twitter)

Twitter 🐦 https://twitter.com/barisbll_dev
Linkedin 📎 https://www.linkedin.com/in/barisbll-dev/
Github 👨🏻‍💻 https://github.com/barisbll
Medium 📰 https://medium.com/@barisbll