combineLatest and forkJoin for combining in Angular - Mini Project: Build & Apply

Using combineLatest and forkJoin in Angular

📖 Scenario: You are building a simple Angular component that fetches user data and settings from two different sources. You want to combine these data streams in two ways: one that updates whenever either source changes, and one that waits for both sources to finish loading.

🎯 Goal: Create an Angular standalone component that uses combineLatest to react to changes from two observables and forkJoin to wait for both observables to complete before processing the final combined result.

📋 What You'll Learn

Create two observables named user$ and settings$ that emit simple string values.

Create a boolean variable useCombineLatest to switch between combining methods.

Use combineLatest to combine user$ and settings$ when useCombineLatest is true.

Use forkJoin to combine user$ and settings$ when useCombineLatest is false.

Display the combined result in the component template.

💡 Why This Matters

🌍 Real World

Combining data streams from multiple sources is common in real apps, like fetching user info and settings from different APIs and showing combined results.

💼 Career

Understanding how to combine observables with <code>combineLatest</code> and <code>forkJoin</code> is essential for Angular developers working with reactive programming and asynchronous data.

1

Create two observables user$ and settings$

In the Angular component, create two observables named user$ and settings$ using of from rxjs. Set user$ to emit the string 'Alice' and settings$ to emit the string 'Dark Mode'.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-combine-example',
  standalone: true,
  template: `
    Combined result: {{ combinedResult }}
  `
})
export class CombineExampleComponent {
  // Create user$ and settings$ observables here
  // Your code here
}

Need a hint?

Use of('Alice') and of('Dark Mode') to create the observables.

2

Add a boolean variable useCombineLatest

Add a boolean variable named useCombineLatest to the component class and set it to true. This variable will control which combining method to use.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-combine-example',
  standalone: true,
  template: `
    Combined result: {{ combinedResult }}
  `
})
export class CombineExampleComponent {
  user$ = of('Alice');
  settings$ = of('Dark Mode');
  combinedResult = '';
  // Add useCombineLatest boolean here
  // Your code here
}

Need a hint?

Just add useCombineLatest = true; inside the class.

3

Use combineLatest or forkJoin to combine observables

Import combineLatest and forkJoin from rxjs. Inside the component constructor, subscribe to either combineLatest([user$, settings$]) if useCombineLatest is true, or forkJoin([user$, settings$]) if false. Set the combinedResult string to show both values joined by a comma.

Angular

import { Component } from '@angular/core';
import { of, combineLatest, forkJoin } from 'rxjs';

@Component({
  selector: 'app-combine-example',
  standalone: true,
  template: `
    Combined result: {{ combinedResult }}
  `
})
export class CombineExampleComponent {
  user$ = of('Alice');
  settings$ = of('Dark Mode');
  combinedResult = '';
  useCombineLatest = true;

  constructor() {
    // Subscribe to combined observables here
    // Your code here
  }
}

Need a hint?

Use if (this.useCombineLatest) { combineLatest(...).subscribe(...) } else { forkJoin(...).subscribe(...) }.

4

Add a toggle button to switch combining methods

In the component template, add a button with (click) event that toggles the useCombineLatest boolean. Update the subscription logic to run again when toggled. Display the current method name above the combined result.

Angular

import { Component } from '@angular/core';
import { of, combineLatest, forkJoin } from 'rxjs';

@Component({
  selector: 'app-combine-example',
  standalone: true,
  template: `
    
    
    Combined result: {{ combinedResult }}
  `
})
export class CombineExampleComponent {
  user$ = of('Alice');
  settings$ = of('Dark Mode');
  combinedResult = '';
  useCombineLatest = true;

  constructor() {
    // Your code here
  }

  // Add toggle method here
  // Your code here
}

Need a hint?

Add a button with (click)="toggleMethod()" and implement toggleMethod() to switch useCombineLatest and resubscribe.