Fetching data from multiple service on single component using RXJS in angular

Possibly something like this. Use tap to tap into the response and do anything needed. And forkJoin will merge the response and give it in an array, the first index will the be response of the first observable that was passed in.

getdata1() {
    this.http.get<{message:string,Data1:any}>('http://localhost:3000/api/1').pipe(
        map((data1)=>{
            return Data1.Data1.map(data=>{
              return {
                id: data._id,
                data1Title:data1.data1Title,
              }
            })
        }),
        tap((data1)=>{
            //save to data1 if needed
            this.serv1Subject.next([...this.data1]))
        })
    )
}

getdata2() {
    this.http.get<{message:string,Data2:any}>('http://localhost:3000/api/2').pipe(
        map((data2)=>{
            return Data2.Data2.map(data=>{
                return  {
                    id: data._id,
                    data2Title:data2.data1Title,
                }
            })
        }),
        tap((data2)=>{
            //save to data2 if needed
            this.serv2Subject.next([...this.data2]))
        })
    )
}


forkJoin(
    getdata1(),
    getdata2()
).subscribe((x:any[])=>this.functionY(x));
  
functionY([a, b]){
    console.log({a: a,b: b});
}

You can use forkJoin from rxjs.

import { forkJoin } from 'rxjs';

component.ts

ngOnInit() {
  forkJoin([this.serv1.getData1Listener(), this.serv2.getData2Listener()]).subscribe(data => {
    this.data1 = data[0];
    this.data2 = data[1];

  });
}

Here's an example of how you can have if implemented:

import { zip } from 'rxjs';
import { first } from 'rxjs/operators';

ngOnInit() {

  this.serv1.getdata1()
  this.serv2.getdata2()

  zip(this.serv1.getData1Listener(), this.serv2.getData2Listener())
  .pipe(first())
  .subscribe(([data1, data2]) => {
     this.data1 = data1;
     this.data2 = data2;

     functionY(data1, data2)
  })

}

forkJoin should be the best operator in this scenario. It is equally important to understand other higher order operators, this will help to know when to use those. For e.g.

concatMap — helps to map observables in sequence while waiting for previous observable to complete. The best use case would be a sequential form save.

mergeMap — helps mapping of observables running in parallel. All the previous Observables are kept alive.

switchMap — switchMap is the way to go if we want to cancel previous subscriptions. Type-ahead feature is best implemented using switchMap combined with deboundTime() and distinctUntilChanged().

exhaustMap — used for ignoring newly emitted values till ongoing observable is complete. Best used when we are saving data on click of a button, which has a probability of being clicked multiple times.