"Combining Observables — forkJoin, combineLatest, zip & More"
👋 Welcome to Chapter 7!
Real apps rarely get data from just one place. A product page might need:
- The product details (from
/api/products/5) - The user's wishlist (from
/api/wishlist) - The store's discount config (from
/api/config)
How do you handle multiple Observables at the same time?
That's what today's combination operators are for!
🍽️ The Restaurant Kitchen Analogy
Imagine a chef 👨🍳 preparing a 3-course meal:
forkJoin — "Start cooking all 3 dishes at the same time. Serve the full meal ONLY when ALL dishes are ready."
→ Wait for ALL to complete, then give you all results together
combineLatest — "Whenever ANY dish is updated, bring out the current status of all dishes."
→ Every time any Observable emits, give you the latest value from all
zip — "Match dish from kitchen 1 with dish from kitchen 2, one pair at a time."
→ Pairs values by position
Let's see each one in detail.
🍴 forkJoin — Wait for All, Then Done
forkJoin runs multiple Observables in parallel and waits until all of them complete. Then it emits all the results at once.
Like Promise.all() but for Observables!
Simple Example
import { forkJoin, of } from 'rxjs';
import { delay } from 'rxjs/operators';
forkJoin({
users: of(['Alice', 'Bob']).pipe(delay(1000)),
products: of(['Apple', 'Banana']).pipe(delay(500)),
config: of({ theme: 'dark' }).pipe(delay(200))
}).subscribe(results => {
console.log(results.users); // ['Alice', 'Bob']
console.log(results.products); // ['Apple', 'Banana']
console.log(results.config); // { theme: 'dark' }
});
// All three run in PARALLEL. Total wait time = 1000ms (the slowest)
// If it were sequential, total = 1700ms
Real Angular Example — Loading a Dashboard
// dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { forkJoin } from 'rxjs';
@Component({
selector: 'app-dashboard',
template: `
<div *ngIf="!isLoading">
<div class="stats-card">
<h3>Total Users</h3>
<p>{{ stats?.totalUsers }}</p>
</div>
<div class="stats-card">
<h3>Orders Today</h3>
<p>{{ stats?.ordersToday }}</p>
</div>
<div class="stats-card">
<h3>Revenue</h3>
<p>৳{{ stats?.revenue }}</p>
</div>
<div class="recent-orders">
<h3>Recent Orders</h3>
<div *ngFor="let order of recentOrders">
{{ order.id }} — {{ order.status }}
</div>
</div>
</div>
<div *ngIf="isLoading">Loading dashboard... ⏳</div>
<div *ngIf="error">{{ error }}</div>
`
})
export class DashboardComponent implements OnInit {
stats: any = null;
recentOrders: any[] = [];
isLoading = true;
error = '';
constructor(
private statsService: StatsService,
private orderService: OrderService
) {}
ngOnInit(): void {
// Load BOTH at the same time — wait for both to finish
forkJoin({
stats: this.statsService.getDashboardStats(),
orders: this.orderService.getRecentOrders(5)
}).subscribe({
next: ({ stats, orders }) => {
this.stats = stats;
this.recentOrders = orders;
this.isLoading = false;
},
error: (err) => {
this.error = 'Failed to load dashboard data';
this.isLoading = false;
}
});
}
}
⚠️ Important: forkJoin only works with Observables that COMPLETE!
HttpClient calls complete after one response ✅
BehaviorSubject never completes ❌ (use combineLatest instead)
🔄 combineLatest — React to Any Change
combineLatest watches multiple Observables and every time any one of them emits, it gives you the latest values from ALL of them.
It's perfect for filter/search UIs where changing any filter should update the results.
Simple Example
import { combineLatest, BehaviorSubject } from 'rxjs';
const searchTerm$ = new BehaviorSubject<string>('');
const category$ = new BehaviorSubject<string>('all');
const priceMax$ = new BehaviorSubject<number>(1000);
combineLatest([searchTerm$, category$, priceMax$])
.subscribe(([search, category, maxPrice]) => {
console.log(`Search: ${search}, Category: ${category}, Max: ${maxPrice}`);
});
// Output immediately: Search: , Category: all, Max: 1000
searchTerm$.next('phone');
// Output: Search: phone, Category: all, Max: 1000
category$.next('electronics');
// Output: Search: phone, Category: electronics, Max: 1000
priceMax$.next(500);
// Output: Search: phone, Category: electronics, Max: 500
Every time any filter changes, you get all three latest values!
Real Angular Example — Product Filter Page
// product-filter.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { combineLatest, Observable } from 'rxjs';
import { map, startWith, debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-product-filter',
template: `
<div class="filters">
<input [formControl]="searchControl" placeholder="Search...">
<select [formControl]="categoryControl">
<option value="all">All Categories</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="food">Food</option>
</select>
<label>Max Price: ৳{{ priceControl.value }}</label>
<input type="range" [formControl]="priceControl" min="0" max="10000" step="100">
</div>
<p>Showing {{ (filteredProducts$ | async)?.length }} products</p>
<div *ngFor="let product of filteredProducts$ | async" class="product-card">
<h3>{{ product.name }}</h3>
<span>৳{{ product.price }}</span>
<span class="tag">{{ product.category }}</span>
</div>
`
})
export class ProductFilterComponent implements OnInit {
searchControl = new FormControl('');
categoryControl = new FormControl('all');
priceControl = new FormControl(10000);
allProducts: Product[] = [];
filteredProducts$!: Observable<Product[]>;
constructor(private productService: ProductService) {}
ngOnInit(): void {
// First, load all products
this.productService.getProducts().subscribe(products => {
this.allProducts = products;
});
// Watch all three filters — update results whenever any changes
this.filteredProducts$ = combineLatest([
this.searchControl.valueChanges.pipe(startWith(''), debounceTime(300)),
this.categoryControl.valueChanges.pipe(startWith('all')),
this.priceControl.valueChanges.pipe(startWith(10000))
]).pipe(
map(([search, category, maxPrice]) => {
return this.allProducts.filter(product => {
const matchesSearch = !search ||
product.name.toLowerCase().includes(search.toLowerCase());
const matchesCategory = category === 'all' ||
product.category === category;
const matchesPrice = product.price <= (maxPrice || 10000);
return matchesSearch && matchesCategory && matchesPrice;
});
})
);
}
}
This is real production-grade code! The filter UI updates instantly as the user adjusts any control — no button needed!
🤝 withLatestFrom — Use the Latest Value Without Triggering
withLatestFrom is like combineLatest, but it only triggers when the first Observable emits — it just grabs the latest value from the others as a "snapshot".
import { withLatestFrom } from 'rxjs/operators';
// When a button is clicked, grab the current user and filter state
buttonClick$
.pipe(
withLatestFrom(currentUser$, activeFilters$)
)
.subscribe(([clickEvent, user, filters]) => {
// Only triggered by clicks, but we have user and filters available
this.logUserAction(user, filters, 'EXPORT');
});
Real Example — Save Button with Form State
// When save is clicked, capture the CURRENT form values
this.saveButton.clicks$
.pipe(
withLatestFrom(this.form.valueChanges.pipe(startWith(this.form.value)))
)
.subscribe(([_, formValues]) => {
this.save(formValues);
});
🤐 zip — Pair by Position
zip waits for ALL Observables to emit one value, then combines them by position. Like a zipper — left tooth, right tooth, left tooth, right tooth...
import { zip, of } from 'rxjs';
const names$ = of('Alice', 'Bob', 'Charlie');
const scores$ = of(95, 87, 92);
const grades$ = of('A', 'B+', 'A-');
zip(names$, scores$, grades$).subscribe(([name, score, grade]) => {
console.log(`${name}: ${score} (${grade})`);
});
// Output:
// Alice: 95 (A)
// Bob: 87 (B+)
// Charlie: 92 (A-)
zip is less commonly used in Angular, but handy when you need to pair corresponding items.
🏗️ Full Real-World Example — Product Detail Page
A product detail page often needs data from multiple APIs. Here's the complete pattern:
// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { forkJoin, combineLatest, Observable, EMPTY } from 'rxjs';
import { switchMap, catchError, map } from 'rxjs/operators';
interface PageData {
product: Product;
reviews: Review[];
isInWishlist: boolean;
relatedProducts: Product[];
}
@Component({
selector: 'app-product-detail',
template: `
<ng-container *ngIf="pageData$ | async as data">
<div class="product-hero">
<h1>{{ data.product.name }}</h1>
<p>{{ data.product.description }}</p>
<p class="price">৳{{ data.product.price }}</p>
<button [class.active]="data.isInWishlist" (click)="toggleWishlist()">
{{ data.isInWishlist ? '❤️ Wishlisted' : '🤍 Add to Wishlist' }}
</button>
</div>
<section class="reviews">
<h2>Reviews ({{ data.reviews.length }})</h2>
<div *ngFor="let review of data.reviews">
<strong>{{ review.author }}</strong>
<span>⭐ {{ review.rating }}</span>
<p>{{ review.comment }}</p>
</div>
</section>
<section class="related">
<h2>Related Products</h2>
<div *ngFor="let related of data.relatedProducts" class="mini-card">
{{ related.name }} — ৳{{ related.price }}
</div>
</section>
</ng-container>
<div *ngIf="isLoading">Loading... ⏳</div>
<div *ngIf="errorMessage">{{ errorMessage }}</div>
`
})
export class ProductDetailComponent implements OnInit {
pageData$!: Observable<PageData>;
isLoading = true;
errorMessage = '';
constructor(
private route: ActivatedRoute,
private productService: ProductService,
private reviewService: ReviewService,
private wishlistService: WishlistService
) {}
ngOnInit(): void {
this.pageData$ = this.route.params.pipe(
switchMap(params => {
const id = params['id'];
// Load ALL data for this product in parallel
return forkJoin({
product: this.productService.getProduct(id),
reviews: this.reviewService.getReviews(id),
isInWishlist: this.wishlistService.isInWishlist(id),
relatedProducts: this.productService.getRelated(id)
});
}),
catchError(err => {
this.errorMessage = 'Failed to load product details';
this.isLoading = false;
return EMPTY;
})
);
// Track loading state
this.pageData$.subscribe(() => {
this.isLoading = false;
});
}
toggleWishlist(): void {
// ... toggle logic
}
}
Everything loads in parallel, the route handles navigation, and errors are caught gracefully — all in one clean stream!
🧠 Choosing the Right Combination Operator
forkJoin — "Load everything once, wait for all to finish, give me all results"
Best for: page initialization, loading multiple API resources at once
combineLatest — "Every time ANYTHING changes, give me all the latest values"
Best for: filter/search UIs, forms with live preview, dashboards with real-time updates
withLatestFrom — "When THIS happens, also give me the latest value of THAT"
Best for: button clicks that need current state, actions that depend on form values
zip — "Match item 1 with item 1, item 2 with item 2..."
Best for: combining two arrays where order corresponds
🧠 Chapter 7 Summary — What You Learned
-
forkJoinruns multiple Observables in parallel and emits all results when ALL complete — likePromise.all() -
combineLatestemits whenever any Observable emits, always giving you the latest from all — perfect for filter UIs -
withLatestFromonly triggers from one source, but snapshots the latest value from others -
zippairs values by position from multiple Observables - These operators are essential for building real-world pages that need data from multiple sources
📚 Coming Up in Chapter 8...
One of the most powerful and real-world RxJS patterns in Angular:
Angular Forms + RxJS — how to build reactive forms with live validation, dependent fields, and dynamic behavior using valueChanges, statusChanges, and the operators we've learned!
See you in Chapter 8! 🚀
💌 RxJS Deep Dive Newsletter Series | Chapter 7 of 10
Follow me on : Github Linkedin Threads Youtube Channel