Absolutely, working with Observables is similar to working with Promises:

async asyncRetrieveEmployeeInfo(): Promise<any> {
  return this.apiService.fetchEmployeeInfoObservable()
    .pipe(
      mergeMap(employeeData => this.apiService.getParamsObservable()
        .pipe(
          tap((paramsData): void => {
            // Here you have access to the data
            // from apiService.fetchEmployeeInfoObservable()
            // stored in employeeData variable
            // and data from apiService.getParamsObservable()
            // stored in paramsData.
            // You can perform any necessary actions within tap function
            // similarly to subscribe method.
          }),
        )
      ),
    )
    .toPromise();
}

To use it, follow this example:

async ngOnInit(): Promise<void> {
  // Just an example usage in ngOnInit.
  const someData = await this.asyncRetrieveEmployeeInfo();
}

The traditional way of utilizing Observable is demonstrated below:

retrieveEmployeeInfo(): Observable<any> {
  return this.apiService.getEmployeeDataObservable()
    .pipe(
      mergeMap(employeeData => this.apiService.receiveParamsObservable()
        .pipe(
          tap(paramsData => {
            // Access data
            // from apiService.getEmployeeDataObservable()
            // as employeeData variable
            // and data from apiService.receiveParamsObservable()
            // as paramsData.
          }),
        )
      ),
      take(1), // Use this if only the first value is needed; otherwise, remove this line.
    );
}

Using subscription:

ngOnInit(): void {
  // Just for demonstration in ngOnInit.
  this.subscription = this.retrieveEmployeeInfo().subscribe();
}

Remember to unsubscribe to prevent memory leaks:

ngOnDestroy(): void {
  this.subscription.unsubscribe();
}

1. Utilize any of the RxJS higher order mapping operators (such as switchMap) to transition from one observable to another that have dependencies on each other.

addEmployeeData() {
  this.apiService.getEmployeeDataObservable().pipe(
    switchMap(_ => {
      let employee = res;  // why is this necessary though?
      return this.apiService.getParamsObservable();
    })
  ).subscribe({
    next: (pageParams: any) => { 
      // handle response
    },
    error: (error: any) => {
      // handle error
    }
  );
}

2. If the observables are not directly related to each other (e.g. if the second request does not rely on the outcome of the first request), consider using functions like RxJS forkJoin or combineLatest to execute the observables concurrently.

   Check out my post here for a quick comparison of mapping operators and combination functions.

3. It's advisable to close any active subscriptions in the ngOnDestroy method to prevent potential memory leaks. There are various ways to handle subscription closure.

   3.1 unsubscribe - Store the subscription in a member variable and call unsubscribe() on it within the ngOnDestroy hook.

   3.2 take(1) - End the subscription after the first event emission.

   3.3 first() - Similar to take(1) but with an additional predicate feature and emits an error if none of the emissions match the predicate. Refer to this link for a comparison between take(1) and first().

   3.4. takeUntil() - Utilize an additional multicast to close multiple open subscriptions with a single event emission, considered the most elegant approach. Read more about it here.

Note: Observables returned by Angular HttpClient automatically complete after the first event emission without the need for any of the mentioned operations in most scenarios.

If you have 2 Observables and are waiting to perform the logic only after subscribing to the second one, it seems that no logic is being implemented without data from the second observable.

You can approach this situation in two ways:

1. Utilize the mergeMap operator in RxJS as suggested by Mikhail Filchushkin.

(OR)

2. In my method, make use of the combineLatest operator and a Subject variable to terminate the subscription once completed. Here's how you can do it:

The advantage of using combineLatest over mergeMap is that you will only have one subscription and unsubscription compared to two in mergeMap.

With mergeMap, subscription happens to the first variable first and then to the second if the first is successfully subscribed. Whereas combineLatest subscribes regardless of the incoming data.

This characteristic can be seen as both an advantage and a disadvantage depending on your usage.

If you only require the first value, utilize the take(1) operator to prevent further subscriptions.

const employeeObservable = this.apiService.getEmployeeDataObservable();
const paramsObservable = this.apiService.getParamsObservable();

destroy$: Subject<any> = new Subject(); // Used for destroying the subscription later

// Combine the observables and destroy upon completion.

combineLatest(employeeObservable, paramsObservable)
  .pipe(
      takeUntil(this.destroy$),
      take(1)
   )
  .subscribe(
     ([employeeObservableData, paramsObservableData]) => {
        if (employeeObservableData && paramsObservableData) {
          // Implement your logic here
        }  
     }
  );

ngOnDestroy() {
   this.destroy$.next();
   this.destroy$.complete();
}

Make sure to establish a subscription and cancel it during the onDestroy lifecycle hook.

// import the necessary module
import { Subscription } from 'rxjs';

// declare a variable for holding the subscription
subscription: Subscription;

ngOnInit() {
    this.subscription = // employeeObservable.subscribe()
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}