The issue of Angular finalize not functioning when used within a pipe alongside switchMap

Question

The issue of Angular finalize not functioning when used within a pipe alongside switchMap

Once the user confirms, I want the process to begin and keep the modal busy until it's complete. However, the current code does not function in this manner. The isModalBusy condition only turns false when an HTTP error is returned from the service. In all other cases, it remains true.

run() {
        let inputParams = JSON.stringify(this.paramsInput);

        this.confirmation.warn(
            'RunConfirmationMessage',
            'AreYouSure',
            {messageLocalizationParams: []}
        ).pipe(
            // take(1)  when i put take(1) here it works tho,
            filter(status => status === Confirmation.Status.confirm),
            switchMap(() => {
                this.workOutput = {
                    success: true,
                    consoleOutput: "Executing now..."
                }
                this.activeTabId = 1;
                this.isModalBusy = true;
                return this.processService.doWork({work: this.work, workParams: inputParams});
            }),
            finalize(() => {
                this.isModalBusy = false
            }),
        ).subscribe({
            next: (result) => this.workOutput = result,
            error: (error: HttpErrorResponse) => this.workOutput = {success: false, errorMessage: error.message} as WorkOutput,
        });
    }

I obtained this code from the theme documentation I am using, and I am unsure about the purpose of mapSwitch in this context. Any clarification on why this is used and how to make it function as intended would be greatly appreciated.

javascript angular typescript rxjs observable

Answer 1

Answer №1

@Andreas is correct in explaining why take(1) works as intended. Providing additional context on the functionality of switchMap, the output of this.confirmation.warn is an Observable stream (presumably of type Observable<Confirmation> according to your code) which undergoes a transformation within the pipe.

Within your code, any values emitted by this.confirmation.warn will be processed by every operator defined within the pipe() block:

.pipe(
  // extracting the initial value emitted from warn()
  take(1),
  
  // filtering out any emissions unless they match the desired status
  filter(status => status === Confirmation.Status.confirm),
  
  // switchMap alters the focus of the stream - this pipe no longer tracks 
  // the value emitted by warn() but instead switches to a different observable. 
  // The output returned by doWork() will continue down the pipe.
  switchMap(() => {
    this.workOutput = {
      success: true,
      consoleOutput: "Executing now..."
    }
    this.activeTabId = 1;
    this.isModalBusy = true;
    return this.processService.doWork({work: this.work, workParams: inputParams});
  }),

  // upon completion of the Observable, this operator will execute. take(1)
  // ensures only one value is evaluated before the Observable completes.
  // 
  // this may not be necessary if utilizing the `complete` function within the
  // subscribe block as demonstrated in the next example
  finalize(()=> {
    this.isModalBusy=false
  }),
)

To update isModalBusy regardless of the outcome, you can include it in both the complete and error functions within your subscription:

  subscribe({
   // executed after each emission from the pipe
   next: (result)=>this.workOutput = result,
   
   // error handling already implemented for the pipe
   error: (error: HttpErrorResponse)>{
     
     // ensuring proper handling of isModalBusy
     this.isModalBusy=false;

     return this.workOutput={success:false,errorMessage:error.message} as WorkOutput,
     }
   }),

  // akin to finalize, any actions here will occur _once_ upon successful 
  // completion of the observable.
  complete:>{
    this.isModalBusy=false;
  })

Answer 2

@Andreas is correct in explaining why take(1) works as intended. Providing additional context on the functionality of switchMap, the output of this.confirmation.warn is an Observable stream (presumably of type Observable<Confirmation> according to your code) which undergoes a transformation within the pipe.

Within your code, any values emitted by this.confirmation.warn will be processed by every operator defined within the pipe() block:

.pipe(
  // extracting the initial value emitted from warn()
  take(1),
  
  // filtering out any emissions unless they match the desired status
  filter(status => status === Confirmation.Status.confirm),
  
  // switchMap alters the focus of the stream - this pipe no longer tracks 
  // the value emitted by warn() but instead switches to a different observable. 
  // The output returned by doWork() will continue down the pipe.
  switchMap(() => {
    this.workOutput = {
      success: true,
      consoleOutput: "Executing now..."
    }
    this.activeTabId = 1;
    this.isModalBusy = true;
    return this.processService.doWork({work: this.work, workParams: inputParams});
  }),

  // upon completion of the Observable, this operator will execute. take(1)
  // ensures only one value is evaluated before the Observable completes.
  // 
  // this may not be necessary if utilizing the `complete` function within the
  // subscribe block as demonstrated in the next example
  finalize(()=> {
    this.isModalBusy=false
  }),
)

To update isModalBusy regardless of the outcome, you can include it in both the complete and error functions within your subscription:

  subscribe({
   // executed after each emission from the pipe
   next: (result)=>this.workOutput = result,
   
   // error handling already implemented for the pipe
   error: (error: HttpErrorResponse)>{
     
     // ensuring proper handling of isModalBusy
     this.isModalBusy=false;

     return this.workOutput={success:false,errorMessage:error.message} as WorkOutput,
     }
   }),

  // akin to finalize, any actions here will occur _once_ upon successful 
  // completion of the observable.
  complete:>{
    this.isModalBusy=false;
  })

Answer 3

Answer №2

For the finalize function to be executed, it is necessary for the observable to reach completion. This is why using take 1 in your case works effectively. When you use take 1, the stream will emit one value and then immediately terminate (Take emits provided number of values before completing). In the scenario you presented, the observable does not complete, as your subscription is still waiting for additional values.

Answer 4

For the finalize function to be executed, it is necessary for the observable to reach completion. This is why using take 1 in your case works effectively. When you use take 1, the stream will emit one value and then immediately terminate (Take emits provided number of values before completing). In the scenario you presented, the observable does not complete, as your subscription is still waiting for additional values.

The issue of Angular finalize not functioning when used within a pipe alongside switchMap

Answer №1

Answer №2

Similar questions

Issue with Angular 6: Dynamic Meta tag malfunctioning while sharing page on Facebook with og:description tag

Creating an error message display function using HTML and JavaScript when incorrect input is detected

The ActionController is encountering an UnknownFormat error when trying to respond to AJAX requests with js using

Is it possible to run npm scripts directly?

Exploring the effectiveness of testing Svelte components

Using the Express router: Error occurred - Router.use() function expected a middleware function but received an Object instead

Cross-domain scripting

I am trying to set a background image specifically for one page in my application, but I am struggling to make it work. As a newcomer, I am still learning how to

The perplexing paradox of THREE.js line thickness

Using JQuery to Send Form Data with an Ajax POST Request

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

Various modules in the project need to have distinct GitHub origins, particularly in the case of Spring-Angular

The Alertify dialog vanished without being able to confirm

Using Ajax to send a JSON object containing two arrays to a servlet, then parsing it in a Java servlet without the use

The issue of module exports in node.js returning undefined needs to be resolved so that it correctly returns a MongoDB

Tips on how to remove the filter from a select element using Angular?

JavaScript: Techniques for extracting multiple digits from a text

Utilizing JavaScript libraries in a TypeScript project: A step-by-step guide

Error: WebStorm's Language Service has timed out while executing TSLint operations

Utilizing Jquery to Integrate Hashtags