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

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

// 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;
      }
    });
  }
}

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

// 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;
        });
      })
    );
  }
}

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');
  });

// 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);
  });

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

// 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
  }
}