When all observables have finished, CombineLatest will only execute one time

Question

When all observables have finished, CombineLatest will only execute one time

I've encountered a problem that requires me to use a combination of 3 route observables to open a modal. Here is the logic in my code:

combineLatest([obs1, obs2, obs3])
    .subscribe(([s1, s2, s3]: any) => { 
        openModal();
    });

The issue I'm facing is that since this code gets executed 3 times, the modal opens three times as well, which is not the desired behavior.

To handle this, I resorted to a less than ideal solution by introducing a flag like so:

let shouldOpen = true;

combineLatest([obs1, obs2, obs3])
    .subscribe(([s1, s2, s3]: any) => { 
        if(shouldOpen) {
            shouldOpen = false;
            openModal();
        }
    });

However, I am aware that this workaround is not optimal.

My question now is whether there is a way for me to continue using combineLatest but ensure that it is only executed once?

You can also check out this Stackblitz link to experiment with combineLatest.

Note: I have already tried and cannot use forkJoin or zip for this scenario.

angular typescript combinelatest

Answer 1

Answer №1

When forkJoin is not an option (even though it's the right choice), you can choose to ignore the first two emissions from the combineLatest stream.

combineLatest([obs1, obs2, obs3])
  .pipe(skip(2))
  .subscribe(([s1, s2, s3]: any) => { 
    openModal();
  });

If you prefer, you could utilize skipWhile to wait until all three values are defined:

      .pipe(skipWhile(([s1, s2, s3]) => s1===undefined || s2 === undefined || s3===undefined))

Answer 2

When forkJoin is not an option (even though it's the right choice), you can choose to ignore the first two emissions from the combineLatest stream.

combineLatest([obs1, obs2, obs3])
  .pipe(skip(2))
  .subscribe(([s1, s2, s3]: any) => { 
    openModal();
  });

If you prefer, you could utilize skipWhile to wait until all three values are defined:

      .pipe(skipWhile(([s1, s2, s3]) => s1===undefined || s2 === undefined || s3===undefined))

When all observables have finished, CombineLatest will only execute one time

Answer №1

Similar questions

Guide to sending a text from HTML to an Angular 8 Component through the use of the (click) function

How come I am unable to upload my local image using angular-cli?

filter failing to provide output

Utilize async/await to send images using node mailer

The Highcharts Angular library is struggling to access the 'series' property due to it being undefined

What is the best way to add an array object's property value to HTML?

Encountering some problems while trying to use {return this.getAll.get(this.url)} to consume an API within Angular

Deactivate the selection option in Syncfusion NumericTextbox

The type 'string' cannot be assigned to type 'ImageSourcePropType'

The app.component.ts does not always trigger this function

The parameter 'users | undefined' is not compatible with the argument type 'users'. Please note that 'undefined' cannot be assigned to type 'users'

Error in TypeScript React: "Could not locate module: Unable to locate 'styled-components'"

Angular 2 - utilizing dependency injection to access services from within other services

Circular structure error occurred when attempting to convert an object to JSON, starting at an object constructed with the constructor 'Object'

Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

What is the TypeScript counterpart of ParentClass.this?

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

What is causing the dysfunction of angular2 form when used with the HTML <form> tag?

efficiently managing errors in a Nest Jest microservice with RabbitMQ

Choosing a specific option from a dropdown menu in Angular