Knowing how to use exhaustMap in Angular (RxJS)
The exhaustMap operation in Angular (with RxJS) maps values from a source observable into inner observables; however, it disregards fresh emissions while the preceding inner observable is still operating.

It is frequently used when preventing duplicate requests during button clicks, login requests, and form submissions.

Angular makes extensive use of the RxJS library for reactive programming, which is where exhaustMap originates.

The Operation of exhaustMap

When the source Observable emits a value:
It creates an inner Observable.

While that inner Observable is active:
Any new emissions from the source are ignored.

Once the inner Observable completes:
It can accept the next source emission.

Simple Example (Concept)
Imagine a Login button:

• User clicks once → API call starts.
• User clicks again quickly → ignored.
• API completes → next click will work.

This prevents multiple API calls.

source$.pipe(
  exhaustMap(value => innerObservable$)
);

Angular Example (Login Button)
Component Example
import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { exhaustMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-login',
  template: `<button #loginBtn>Login</button>`
})
export class LoginComponent {

  constructor(private http: HttpClient) {}

  ngAfterViewInit() {
    const button = document.querySelector('button');

    fromEvent(button!, 'click')
      .pipe(
        exhaustMap(() =>
          this.http.post('https://api.example.com/login', {
            username: 'test',
            password: '123'
          })
        )
      )
      .subscribe(response => {
        console.log('Login success', response);
      });
  }
}

What Happens Here?
First click → HTTP request starts.
Second click (before request finishes) → ignored.
After request completes → next click works.

Difference from Other Operators

When to Use exhaustMap

✔ Login button
✔ Submit form
✔ Prevent duplicate API calls
✔ Prevent double payments

❌ When you need cancellation → use switchMap
❌ When you need queuing → use concatMap

Real-World Use Case (Form Submit in Angular)
this.formSubmit$
  .pipe(
    exhaustMap(formValue => this.apiService.saveData(formValue))
  )
  .subscribe();

If the user clicks submit multiple times rapidly:

• Only the first request runs.
• Others are ignored until it completes.

Easy Way to Remember
exhaustMap = "Ignore until done."