As a beginner in Angular, I am facing a challenge in calling a function after a series of functions have completed their execution. Although I don't require these functions to run sequentially, I do need to trigger another function once all of these functions have finished running.
Here is the snippet of code I am working with:
global() {
this.productsService.getProducts().subscribe(res => {
this.products = res;
this.products.forEach((product, index) => {
this.fullProductDetails[index] = new FullProduct();
this.fullProductDetails[index].product = product;
this.f1(product['a'], index);
this.f2(product['b'], index);
this.f3(product['c'], index);
});
this.initProductsChart();
});
}
f1(a: any, index: number) {
this.productsService.getSomethingByA(a).subscribe(res => {
this.fullProductDetails[index].somethingA = res;
});
}
f2(b: any, index: number) {
this.productsService.getSomethingByB(b).subscribe(res => {
this.fullProductDetails[index].somethingB = res;
});
}
f3(c: any, index: number) {
this.productsService.getSomethingByC(c).subscribe(res => {
this.fullProductDetails[index].somethingC = res;
});
}
initProductsChart() {
...
}
My goal is to kick off the initProductsChart() function only after all instances of f1(), f2(), and f3() have been completed for each product.
Is there a way to achieve this, or do I have to wait for each individual function to finish executing?