RxJS & Observables – Complete Tutorial

---

1️⃣ What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library for handling:

• Asynchronous data

  Event streams

  Real-time updates

  API calls

  User input events

👉 It works using Observables

Angular heavily uses RxJS internally (HTTP, Forms, Router, etc.)

---

2️⃣ What is an Observable?

✅ Simple Definition 

Observable is a stream of data that emits values over time

Think like:

YouTube Live Stream 🎥

WhatsApp Messages 📩

Stock Market Updates 📈

API response

All are data streams

---

3️⃣ Observable vs Promise

Feature	Observable	Promise
Multiple values	✅ Yes	❌ No
Cancelable	✅ Yes	❌ No
Lazy execution	✅ Yes	❌ No
Operators	✅ Many	❌ Limited

👉 Angular HTTP returns Observable

---

4️⃣ Creating Observable

Example 1: Basic Observable

import { Observable } from 'rxjs';

const myObservable = new Observable(observer => {
  observer.next("Hello");
  observer.next("World");
  observer.complete();
});

myObservable.subscribe(data => {
  console.log(data);
});

Output:

Hello
World

---

5️⃣ Observable Lifecycle

1. next() → Emit value

2. error() → Emit error

3. complete() → Finish stream

---

6️⃣ What is Subscription?

To receive data from Observable, we must subscribe.

myObservable.subscribe({
  next: (data) => console.log(data),
  error: (err) => console.log(err),
  complete: () => console.log("Completed")
});


7️⃣ What is Subject?
 Subject = Observable + Observer
It can:
Emit values

Subscribe to values

Share data between components

8️⃣ Types of Subjects

Subject

BehaviorSubject
ReplaySubject
AsyncSubject
You asked for:
✔ Subject
✔ BehaviorSubject
✔ AsyncPipe

🔹 1. Subject
Definition:
Subject does NOT store previous value.
If new subscriber joins, it won’t get old values.
Example:
import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(data => console.log("User 1:", data));

subject.next("Hello");

subject.subscribe(data => console.log("User 2:", data));

subject.next("World");
Output:
User 1: Hello
User 1: World
User 2: World

👉 User 2 did NOT receive "Hello"
🔹2. BehaviorSubject
Definition:
BehaviorSubject always stores the latest value.
New subscriber immediately receives last value.

Must pass initial value
import { BehaviorSubject } from 'rxjs';

const behavior = new BehaviorSubject("Initial Value");

behavior.subscribe(data => console.log("User 1:", data));

behavior.next("Hello");

behavior.subscribe(data => console.log("User 2:", data));
Output:
User 1: Initial Value
User 1: Hello
User 2: Hello
👉 User 2 automatically got latest value
 Real Angular Example (Best Practice)
Scenario: Share data between components
Step 1: Create Service
@Injectable({ providedIn: 'root' })
export class DataService {

  private messageSource = new BehaviorSubject<string>('Default Message');
  currentMessage$ = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

Step 2: Sender Component
constructor(private dataService: DataService) {}

sendMessage() {
  this.dataService.changeMessage("Hello from Component A");
}

Step 3: Receiver Component
message: string = '';

constructor(private dataService: DataService) {}

ngOnInit() {
  this.dataService.currentMessage$.subscribe(msg => {
    this.message = msg;
  });
}