What is RxJS? And What is an Observable?
👋 Welcome to the Series!
Hey there, Angular learner! 👋
You've probably heard words like RxJS, Observable, subscribe, pipe… and thought:
"What is all this? Why does Angular use this? Do I really need this?"
YES. You absolutely need this. And by the end of this series, you will love it.
Let's start from the very beginning — zero assumptions, zero jargon. Just clear, simple, real-world understanding.
🍎 First, Let's Think About a Simple Story
Imagine you ordered a pizza online. 🍕
You placed the order. Now you're just waiting. You didn't stand at the kitchen staring. You went and watched TV. Then, when the pizza arrived, the doorbell rang, and you responded.
That's exactly how RxJS Observables work.
- You subscribe to something (like placing an order)
- Something happens over time (the pizza is being made)
- You react when data arrives (doorbell rings, you get the pizza)
📦 What is RxJS?
RxJS stands for Reactive Extensions for JavaScript.
Think of it as a toolbox 🧰 full of tools to handle:
- Data that comes over time (like user typing in a search box)
- Data from the internet (like loading users from an API)
- Events (like button clicks, form inputs)
- Stuff that happens asynchronously (not immediately, but later)
Angular ships with RxJS built in. You don't install it separately. It's already there, waiting for you.
🔭 What is an Observable?
An Observable is like a pipe through which data flows over time.
Let's use another story:
Imagine a water pipe in your house. The water company sends water through the pipe whenever you open the tap. You don't get all the water at once — it flows continuously as long as the tap is open.
An Observable works the same way:
- It's a source of data
- Data can come one item at a time or many items over time
- You have to open the tap (subscribe) to receive water (data)
- If you close the tap (unsubscribe), data stops flowing
🧪 Let's See Real Code — Step by Step
Step 1: The Simplest Observable Ever
import { Observable } from 'rxjs';
// Creating an Observable — like setting up a water pipe
const myObservable = new Observable((observer) => {
observer.next('Hello!'); // Send first value
observer.next('How are you?'); // Send second value
observer.next('Bye!'); // Send third value
observer.complete(); // Done! No more data.
});
What's happening here?
- We created an Observable using
new Observable(...) - Inside, we have an
observer— think of it as the delivery person -
observer.next(value)— sends a value down the pipe -
observer.complete()— says "I'm done, no more values"
Step 2: Subscribe — Open the Tap!
myObservable.subscribe((value) => {
console.log('Received:', value);
});
Output:
Received: Hello!
Received: How are you?
Received: Bye!
Until you call .subscribe(), nothing happens. The Observable just sits there. It's lazy! It only starts working when someone subscribes.
💡 Key Insight: Observables are lazy — like a YouTube video that only plays when you press Play.
🅰️ Real Angular Example — HTTP Requests
The most common place you'll see Observables in Angular is with HTTP calls.
When you fetch data from an API, Angular's HttpClient returns an Observable, not just a plain value.
Setting Up (app.module.ts)
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule],
// ...
})
export class AppModule {}
The Service (user.service.ts)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface User {
id: number;
name: string;
email: string;
}
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) {}
// This returns an Observable — data will arrive in the future!
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl);
// ^^^^ This is the Observable. Data isn't here yet!
}
}
The Component (user-list.component.ts)
import { Component, OnInit } from '@angular/core';
import { UserService, User } from './user.service';
@Component({
selector: 'app-user-list',
template: `
<h2>👥 User List</h2>
<!-- Show loading message while data is coming -->
<p *ngIf="isLoading">Loading users... ⏳</p>
<!-- Show error if something went wrong -->
<p *ngIf="errorMessage" style="color: red;">{{ errorMessage }}</p>
<!-- Show users when data arrives -->
<ul *ngIf="!isLoading">
<li *ngFor="let user of users">
{{ user.name }} — {{ user.email }}
</li>
</ul>
`
})
export class UserListComponent implements OnInit {
users: User[] = [];
isLoading = true;
errorMessage = '';
constructor(private userService: UserService) {}
ngOnInit(): void {
// 🔔 HERE is where we SUBSCRIBE — we open the tap!
this.userService.getUsers().subscribe({
next: (data) => {
// ✅ Data arrived! Store it.
this.users = data;
this.isLoading = false;
},
error: (err) => {
// ❌ Something went wrong
this.errorMessage = 'Failed to load users. Try again later.';
this.isLoading = false;
},
complete: () => {
// 🏁 Observable is done (optional to handle)
console.log('All users loaded!');
}
});
}
}
🎓 The Three Things an Observable Can Do
When you subscribe, you can listen for three things:
someObservable.subscribe({
next: (value) => { /* Got a value! */ },
error: (err) => { /* Something broke 😱 */ },
complete: () => { /* All done ✅ */ }
});
Think of it like ordering food:
- next → "Your food is ready, here it is!" 🍔
- error → "Sorry, we're out of that item." ❌
- complete → "Your entire order is delivered, we're done!" ✅
🌊 Observable vs Promise — What's the Difference?
You may have used Promises before. Here's a simple comparison:
Promise — delivers one value, one time
// Like getting a single text message
const promise = fetch('/api/user').then(res => res.json());
Observable — can deliver many values over time
// Like getting a WhatsApp conversation — message after message
const observable = this.http.get('/api/users'); // returns Observable
Key differences:
- A Promise executes immediately. An Observable is lazy (only runs when subscribed)
- A Promise gives you one result. An Observable can give many results
- An Observable can be cancelled (unsubscribed). A Promise cannot
- Observables have superpowers — you can transform, filter, combine them (coming in later chapters!)
🏗️ Full Working Angular Example
Here's a complete mini-app that shows Observables in action:
user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUser(id: number): Observable<any> {
return this.http.get(`https://jsonplaceholder.typicode.com/users/${id}`);
}
}
profile.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-profile',
template: `
<div *ngIf="user">
<h2>{{ user.name }}</h2>
<p>Email: {{ user.email }}</p>
<p>Phone: {{ user.phone }}</p>
<p>Website: {{ user.website }}</p>
</div>
<button (click)="loadUser(1)">Load User 1</button>
<button (click)="loadUser(2)">Load User 2</button>
`
})
export class ProfileComponent implements OnInit {
user: any = null;
constructor(private userService: UserService) {}
ngOnInit(): void {
this.loadUser(1); // Load user 1 by default
}
loadUser(id: number): void {
this.userService.getUser(id).subscribe({
next: (data) => this.user = data,
error: (err) => console.error('Error loading user', err)
});
}
}
🎯 Real World Usage — Where You'll See Observables Every Day
Here are places you'll use Observables constantly in real Angular apps:
1. HTTP Requests — loading data from APIs
this.http.get('/api/products').subscribe(...)
2. Router Events — detecting when navigation changes
this.router.events.subscribe(event => { ... })
3. Form Value Changes — reacting when a user types
this.myForm.valueChanges.subscribe(value => { ... })
4. Event Streams — button clicks, scroll events
fromEvent(button, 'click').subscribe(() => { ... })
5. Timers — running code every few seconds
interval(3000).subscribe(() => console.log('3 seconds passed!'))
⚠️ Common Mistake: Forgetting to Subscribe
// ❌ WRONG — Nothing happens! You forgot to subscribe!
this.userService.getUsers();
// ✅ CORRECT — Now it works!
this.userService.getUsers().subscribe(data => {
this.users = data;
});
If you forget to subscribe, the Observable just sits there doing nothing. It's like placing a pizza order but never giving them your address! 🍕
🧠 Chapter 1 Summary — What You Learned
- RxJS is a toolbox for handling data that arrives over time
- Observable is a stream of data — like a pipe that sends values
- You must subscribe to an Observable to receive its data
- An Observable can emit next (values), error (problems), or complete (all done)
- Angular's
HttpClientreturns Observables when making API calls - Observables are lazy — they don't do anything until subscribed
- Observables are more powerful than Promises — they handle streams, not just single values
📚 Coming Up in Chapter 2...
Now that you know what an Observable is, we're going to learn about subscribe() in detail — including the most important thing beginners miss: how to properly clean up subscriptions to prevent memory leaks!
See you in Chapter 2! 👋
💌 RxJS Deep Dive Newsletter Series | Chapter 1 of 10
Share this with a fellow Angular developer who's confused about RxJS!
Follow me on : Github Linkedin Threads Youtube Channel
Top comments (0)