RxJS Basics in Angular — For Interviews #5

RxJS is one of the most asked concepts in Angular interviews — especially for form inputs, API calls, and component communication.

Here’s your pen & paper-friendly note on Basic RxJS Operators like debounceTime, switchMap, forkJoin, etc.

🔍 What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library for handling asynchronous data using Observables and operators.

Angular uses RxJS in:

• HTTP calls (HttpClient)
• Reactive Forms
• Component communication
• Route events, timers, etc.

📦 What is an Observable?

An Observable is a data stream you can subscribe to and react when data comes in.

📌 Common RxJS Operators to Know

1. debounceTime(ms)

Waits for X milliseconds after the last value before emitting.

Use Case: Search input — wait before firing API

searchForm.get('query').valueChanges
  .pipe(debounceTime(300))
  .subscribe(val => this.search(val));

🧠 Waits for 300ms silence before calling search()

2. switchMap()

Cancels previous observable and switches to new one

Use Case: Auto-complete search — cancel old API calls

searchForm.get('query').valueChanges
  .pipe(
    debounceTime(300),
    switchMap(val => this.apiService.search(val))
  )
  .subscribe(data => this.results = data);

🧠 If user types quickly, old API calls are canceled

3. forkJoin([])

Runs multiple observables in parallel, and emits when all complete

Use Case: Fetch user & settings together

forkJoin([
  this.api.getUser(),
  this.api.getSettings()
]).subscribe(([user, settings]) => {
  this.user = user;
  this.settings = settings;
});

🧠 Use forkJoin() when you want all responses at once

4. map()

Transforms each emitted value

this.api.getUser().pipe(
  map(user => user.name.toUpperCase())
).subscribe(name => console.log(name));

5. filter()

Filters emitted values by condition

form.get('age').valueChanges
  .pipe(filter(age => age >= 18))
  .subscribe(validAge => console.log(validAge));

6. take(1)

Only take the first value and then complete

this.route.params.pipe(take(1)).subscribe(params => {
  this.id = params['id'];
});

🧠 How to Write a Basic Observable

const obs = new Observable(observer => {
  observer.next('Hello');
  observer.next('RxJS');
  observer.complete();
});

obs.subscribe(val => console.log(val));

🎯 Real Interview Use-Cases

💬 Common Interview Questions

1. Why use debounceTime?
   👉 To reduce API load on fast-changing inputs.
2. What's the difference between mergeMap, switchMap, concatMap?
   👉 switchMap cancels previous, mergeMap runs in parallel, concatMap queues.
3. When to use forkJoin vs combineLatest?
   👉 forkJoin waits for all to complete once.
   👉 combineLatest emits every time any observable emits.

✅ Summary Table

Would you like to:

• Practice a real RxJS + Angular API example?
• Learn error handling with catchError() and retry()?

Let me know what’s next! You're doing great ✨📘✍️