CombineLatest, execute only once after all observables are complete

Question

I'm trying to solve an issue. Currently, I'm opening a modal but I needed the combination of the 3 route observables for this. So, my code logic is something like this:

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

Since it will get executed 3 times, my modal will also be opened three times but I don't want it to do that but I know is expected behavior.

So, for this, the bad solution I implemented was using a flag like this:

let shouldOpen = true;

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

But of course, that's not a good solution.

So, the question is, Is there a way for me to keep using combineLatest but getting it executed only once?

Here's a Stackblitz if you want to try with combineLatest.

Note: I cannot use forkJoin or zip, I already tried those.

Answer 1

Since you can't use forkJoin (which is the right answer), skip the first two emissions from the combineLatest

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

You could also use skipWhile to skip until all three are defined:

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