Question: i got a Angular components that in the init execute 2 funcions, one of them charge a array and the second one takes the values of thata array and execute a service.

The problem is that the second funcion execute before the first so the array is not charge and the second funcion returns error.

This is the code:

```
import { fromEvent, Subscription } from 'rxjs';
  ngOnInit(): void {
            this.getProducts();
            this.getLoans();
        }

getProducts() {
        this.clientService.getClientProducts(this.clientId).subscribe(
            (res) => {
                if (res.success) {
                    this.products = res.data;
                    console.log('Obtiene productos');
                    console.log(this.products);
                } 
            }
        );
    }

    getLoans() {
        console.log('Obtiene loans');
        console.log(this.products);
        this.products.forEach((element) => {
            if (element.id == '4') {
                this.clientService.getClientLoan(this.clientId).subscribe(
                    (res) => {
                        if (res.success) {
                            this.loans.push(res.data);
                        } else {
                            this.hasErrorOnLoans = true;
                        }
                    },
                );
            }
        });
    }

```

and the console log, can we see that the log that the first functions execute before:

[console log](https://i.stack.imgur.com/Uz4TY.png)

Sorry for my inglish! and thanks.

Answer: 
*Hope below snippet helps*

```
import { fromEvent, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

 ngOnInit(): void {
        getProducts().pipe(
        map(products => products.filter(p => p.id == '4')),
        tap(filteredProducts => {
          getLoans(filteredProducts)
        })
         ).subscribe();
    }

getProducts(): Observable<ClientProduct> {
      return this.clientService.getClientProducts(this.clientId);
}

getLoans(filteredProducts) {
    filteredProducts.forEach((element) => {
      this.clientService.getClientLoan(this.clientId).subscribe((res) => {
          if (res.success) {
              this.loans.push(res.data);
          } else {
              this.hasErrorOnLoans = true;
          }
      });
  });
}

```
I think you are looking for a solution like below.

Solution 1
----------

```
async ngOnInit() {
  await this.firstFunction();
  await this.secondFunction();
}

```

Solution 2
----------

Just using the `switchMap` operator or such things of Observable.