Merge two observables to get the value of two different Dto

Question

I have two observables, each one you get the value of a Dto:

this.about.aboutHeInfo().subscribe((heInfo: HemDto) => {
        this.uiUtils.openDialogResizable({
          hem: heInfo
        }, true, AboutComponent).subscribe();
      });

this.about.aboutPeInfo().subscribe((peInfo: PeoDto) => {
        this.uiUtils.openDialogResizable({
          peo: peInfo
        }, true, AboutComponent).subscribe();
      });

The problem is that when creating both observables two screens are opened because each function creates an apenDialog, how can I merge the two observables and open a single dialog box?

This is the merge I am testing:

const ob1 = this.about.aboutInfo().subscribe((heInfo: HemDto) => {
        this.heInfo= back;
      });

      const ob2 = this.about.aboutQoInfo().subscribe((peInfo: PeoDto) => {
          this.peInfo= people;
        });

forkJoin([ob1, ob2]).subscribe(() => {
        this.uiUtils.openDialogResizable({
          back: this.heInfo,
          people: this.peInfo
        }, true, AboutComponent).subscribe();
      });

Answer 1

You shouldn't use subscribe before merge function, merge take observable not what subscribe returns

Example

const ob1 = this.about.aboutInfo()

const ob2 = this.about.aboutQoInfo()

forkJoin([ob1, ob2]).subscribe(([dto1, dto2]) => {
  ...
});