RxJS in Angular — Chapter 4 | switchMap, mergeMap, concatMap — Observables Inside Observables

👋 Welcome to Chapter 4! Buckle up — this is the chapter that trips up even experienced developers. But don't worry. By the end, it will make total sense. The question today is: What do you do when you have an Observable that produces values… and each value needs to trigger ANOTHER Observable? Sounds weird? Let's make it concrete. 🤔 The Problem — Observable Inside Observable Imagine this scenario: You have a search box. Every time the user types, you want to search the API for results. The user typing = Observable (stream of text values) The API call = another Observable So you have an Observable that needs to trigger another Observable. This is called a higher-order Observable — an Observable of Observables. // What you WANT to do (but this DOESN'T work properly): searchInput.valueChanges .pipe( map(searchTerm => this.http.get(`/api/search?q=${searchTerm}`)) // ❌ Now you have an Observable of Observables! 😱 // subscribe would give you Observable objects, not the actual data! ) .s