ExhaustMap In Angular

The Code Points June 27, 2022 0

In this article, we will learn about ExhaustMap In Angular using examples. Each value from the source observable is mapped into an inner observable, which the Angular ExhaustMap subscribes to. The values from it begin to be emitted, replacing the original value. It then awaits the completion of the inner observable. It ignores any new values received before the completion of the inner observable. After the inner observable is completed, it receives a new value and creates a new inner observable. The entire process is repeated until the source observable is finished.

Syntax

The exhaustMap operator has the following syntax.

exhaustMap(project: (value: T, index: number) => O): OperatorFunction<t observedvalueof="">>

project: We use this function to alter the values emitted by the source observable. There are two arguments to the project function. The first is value, which refers to the value emitted by the source observable. The index number is the second argument. The index number starts at 0 for the first value emitted and increases by one for each item emitted after that. It's comparable to an array's index. An observable must be returned by the project function.

ExhaustMap Example

In order to use ExhaustMap in Angular, we must first import it into our Component or Service.

import { exhaustMap} from 'rxjs/operators';

We have two observables in the following code: srcObservable emits 1,2,3,4 and innerObservable emits 'A','B','C','D'.

let srcObservable= of(1,2,3,4)
let innerObservable= of('A','B','C','D')
 
srcObservable.pipe(
  exhaustMap( val => {
    console.log('Source value '+val)
    console.log('starting new observable')
    return innerObservable
  })
)
.subscribe(ret=> {
  console.log('Recd ' + ret);
})
 
 
//Output
Source value 1
starting new observable
Recd A
Recd B
Recd C
Recd D
Source value 2
starting new observable
Recd A
Recd B
Recd C
Recd D
Source value 3
starting new observable
Recd A
Recd B
Recd C
Recd D
Source value 4
starting new observable
Recd A
Recd B
Recd C
Recd D

The values for the ExhaustMap come from the srcObservable. It produces a new observable, called innerObservable, for each value. It also subscribes to the innerObservable automatically. The values (A, B, C, D) are emitted by the innerObservable and pushed to the subscribers.

The way the ExhaustMap handles the inner observable differs from the MergeMap, SwitchMap, and ConcatMap. ExhaustMap always waits for the inner observable to complete before proceeding. During this time, it ignores any value it receives from the source. Any value it receives after the inner observable has been completed is accepted, and a new inner observable is created.

The following example demonstrates this distinction.

ExhaustMap waits for the inner observable to finish

Before restarting, ExhaustMap builds and waits for an inner observable.

Using the fromEvent method, we build an observable from a button's click event in the following example. The ExhaustMap operation returns an inner observable delayedObs for each button click.

The delayedObs sends out five values separated by 1000 milliseconds.

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { of, from, fromEvent, interval, Observable } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';
 
@Component({
  selector: 'app-root',
  template: `<button button="">Click Me</button>`,
})
export class AppComponent implements AfterViewInit{
 
  @ViewChild('button',{static:true}) button;
  clicks$:Observable<any>;
 
  ngAfterViewInit() {
    this.clicks$ = fromEvent(this.button.nativeElement, 'click');
    this.exhaustMapExample3();
  }
 
  delayedObs(count:number) {
    return new Observable((observer) => {
      setTimeout(() => { observer.next(count+" A") }, 1000);
      setTimeout(() => { observer.next(count+" B") }, 2000);
      setTimeout(() => { observer.next(count+" C") }, 3000);
      setTimeout(() => { observer.next(count+" D") }, 4000);
      setTimeout(() => { observer.next(count+" E"); observer.complete() }, 5000);
    })
  }
 
  exhaustMapExample3() {
 
    let obs=
 
    this.clicks$
      .pipe(
        exhaustMap(() => {
          this.count=this.count+1;
          return this.delayedObs(this.count)
        })
      )
      .subscribe(val => console.log(val));
  }
 
}

Before restarting, ExhaustMap builds and waits for an inner observable.

Using the fromEvent method, we build an observable from a button's click event in the following example. The ExhaustMap operation returns an inner observable delayedObs for each button click.

The delayedObs sends out five values separated by 1000 milliseconds.

Using ExhaustMap in Angular

The exhaustMap is handy in situations where you don't want duplicate values to be sent.

For example, if a user clicks the Submit button twice, the back end will receive two HTTP requests. The ExhaustMap will prohibit additional HTTP calls from being created until the preceding one has been completed.

Conclusion

In this article, we learned what is ExhaustMap and how to use it in Angular using examples.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.