Understanding RxJS Mapping Operators with a Hospital Story
If you've been learning RxJS in Angular, you've probably come across these four operators: mergeMap concatMap switchMap exhaustMap At first, they all seem to do almost the same thing—they map one Observable into another. The real difference lies in how they handle new incoming requests while another request is already in progress. Instead of memorizing definitions, let's visit a hospital. Imagine a hospital with four different departments. Patients keep arriving, and each department follows a di
If you've been learning RxJS in Angular, you've probably come across these four operators:
mergeMapconcatMapswitchMapexhaustMap
At first, they all seem to do almost the same thing—they map one Observable into another. The real difference lies in how they handle new incoming requests while another request is already in progress.
Instead of memorizing definitions, let's visit a hospital.
🏥 Welcome to RxJS Hospital
Imagine a hospital with four different departments. Patients keep arriving, and each department follows a different policy for handling them.
Each department represents one RxJS mapping operator.
🟢 mergeMap – General Outpatient Department (OPD)
Scenario
You walk into the General OPD with a fever.
Another patient arrives with a cough.
Another comes in with a headache.
Since there are multiple general doctors available, every patient is assigned to the next available doctor immediately.
Patient A → Doctor 1
Patient B → Doctor 2
Patient C → Doctor 3
Patient D → Doctor 4
Enter fullscreen mode Exit fullscreen mode
Everyone is treated simultaneously.
Some consultations finish earlier than others, depending on the complexity of the case.
RxJS Behavior
mergeMap allows multiple inner Observables to run at the same time.
- No waiting
- No ordering guarantee
- Maximum throughput
Angular Example
Loading product details for multiple products simultaneously.
from(productIds).pipe(
mergeMap(id => this.http.get(`/api/products/${id}`))
);
Enter fullscreen mode Exit fullscreen mode
🔵 concatMap – Specialist Consultation
Now imagine you're visiting a heart specialist.
There is only one specialist available.
Even if several patients arrive together, they cannot enter at the same time.
Patient A
↓
Patient B
↓
Patient C
Enter fullscreen mode Exit fullscreen mode
The doctor finishes one consultation completely before calling the next patient.
Nobody skips the queue.
RxJS Behavior
concatMap executes requests sequentially.
- Preserves order
- Waits for completion
- Perfect for dependent operations
Angular Example
Uploading multiple files one after another.
from(files).pipe(
concatMap(file => this.upload(file))
);
Enter fullscreen mode Exit fullscreen mode
Each upload starts only after the previous upload finishes.
🟡 switchMap – Emergency ICU
Now let's move to the ICU.
A doctor is examining Patient A.
Suddenly an ambulance arrives with a critical patient.
The doctor immediately shifts attention to the emergency case.
The previous consultation is abandoned because the emergency patient has higher priority.
If another even more critical patient arrives, the doctor switches again.
Patient A ❌
Emergency Patient B ✔
Emergency Patient C ✔
Enter fullscreen mode Exit fullscreen mode
Only the latest emergency matters.
RxJS Behavior
switchMap cancels the previous Observable and subscribes to the newest one.
- Previous request is cancelled
- Latest request always wins
Angular Example
Search autocomplete.
The user types:
A
An
Ang
Angu
Angular
Enter fullscreen mode Exit fullscreen mode
You don't want five HTTP requests.
You only care about the latest search term.
searchText.pipe(
switchMap(text => this.http.get(`/search?q=${text}`))
);
Enter fullscreen mode Exit fullscreen mode
🔴 exhaustMap – Operation Theatre
Finally, we arrive at the Operation Theatre.
A surgeon has already started performing surgery.
While the surgery is in progress, more patients arrive.
Patient B
Patient C
Patient D
Enter fullscreen mode Exit fullscreen mode
The surgeon cannot leave the operating table.
No new patient is accepted until the current operation is fully completed.
Operation in Progress
↓
Ignore New Patients
↓
Operation Completed
↓
Accept Next Patient
Enter fullscreen mode Exit fullscreen mode
RxJS Behavior
exhaustMap ignores all new emissions until the current Observable completes.
- First request wins
- Ignore everything else
- Prevents duplicate execution
Angular Example
Preventing duplicate form submissions.
fromEvent(button, 'click').pipe(
exhaustMap(() => this.http.post('/save', data))
);
Enter fullscreen mode Exit fullscreen mode
Even if the user clicks the Save button multiple times, only the first request is processed until it completes.
Comparison
| Operator | Hospital Department | What Happens? |
|---|---|---|
| mergeMap | General OPD | Every patient gets a doctor immediately. |
| concatMap | Specialist Consultation | Patients wait in a queue and are treated one by one. |
| switchMap | ICU | Stop treating the current patient and immediately attend the latest emergency. |
| exhaustMap | Operation Theatre | Ignore new patients until the current surgery is complete. |
How to Remember Forever
Whenever you forget these operators, ask yourself one simple question:
"What happens when another patient arrives while the doctor is already busy?"
- mergeMap → "Send them to another available doctor."
- concatMap → "Please wait for your turn."
- switchMap → "Emergency! Stop everything and attend the latest patient."
- exhaustMap → "The surgeon is operating. Nobody else can enter."
That single question is enough to identify the correct RxJS operator in most real-world Angular scenarios.
