RxJS 7 - Observable, Observer and Subscription
Tags: webdev, javascript, rxjs, angular
Published: 2023-03-20 09:25:46

_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_

# Exercises: Observable, Observer and Subscription

## Teardown, Completion Notification

Let’s say we want to send a complete notification after two seconds, and consume the complete notification that is emitted.

Also we want to make some cleanup when the teardown is happening. How can we do that?

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

const $observable = new Observable((subscriber) => {
  subscriber.next('First');
  setTimeout(() => {
    subscriber.next('After one sec');
  }, 1000);
  setTimeout(() => {
    subscriber.next('After two sec');
    subscriber.complete();
  }, 2020);

  return () => {
    console.log('Teardown');
  };
});

const observer = $observable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Completed'),
});
```


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


We see for the first time that when we create a new observable, we can return a function and this function will be called at the teardown process.

This is really handy because in that step we can clean our logic and make the required changes.

## Error Notification

This time let’s look at the logic what happens when an error is emitted

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

const observable$ = new Observable<string>((subscriber) => {
  console.log('Observable executed');
  subscriber.next('Alice');
  subscriber.next('Ben');
  setTimeout(() => {
    subscriber.next('Charlie');
    subscriber.error(new Error('Something went wrong :('));
  }, 2000);

  return () => {
    console.log('Teardown');
  };
});

console.log('Before subscribe');
observable$.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Completed'),
  error: (err: Error) => console.log(err.message),
});
console.log('After subscribe');
```


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


## Unsubscribe

Let’s create an interval that emits a value every 2 second and we unsubscribe to it ater 7 seconds, and clean the interval using the teardown function

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

const interval$ = new Observable<number>(subscriber => {
  let counter = 1;

  const intervalId = setInterval(() => {
    console.log('Emitted', counter);
    subscriber.next(counter++);
  }, 2000);

  return () => {
    clearInterval(intervalId);
  };
});

const subscription = interval$.subscribe(value => console.log(value));

setTimeout(() => {
  console.log('Unsubscribe');
  subscription.unsubscribe();
}, 7000);
```


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

## 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