RxJS in Angular — Chapter 7 | Combining Observables — `forkJoin`, `combineLatest`, `zip` & More

"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

• forkJoin runs multiple Observables in parallel and emits all results when ALL complete — like Promise.all()
• combineLatest emits whenever any Observable emits, always giving you the latest from all — perfect for filter UIs
• withLatestFrom only triggers from one source, but snapshots the latest value from others
• zip pairs 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