Angular - *ngComponentOutlet is behaving slow intermittently on loading dynamic components

I have a very simple code for loading components dynamically but since we are fetching the values from api it behaves slow intermittently. I'm sure the api performance is not bad. I'm calling an api in my service to fetch the values and assigning it to a signal and by using its id, I'm assigning the values in each component. I have injected my service in the parent component to fetch the value directly. Is there any better way to do this? Below is the code I have used

<ng-container *ngComponentOutlet="fetchComponent(val.comp);inputs: services.getDataSignals()?.get(id)?.values;" />
</div>```

```getDataSignals.set("firstComp", { values: { val: fromapi.value, color: red } });```



I tried to achieve this using observable but since we have multiple components the loading is getting slower. I tried to hardcode the values with that the values are loading without any lag. So it looks like there is something to do with the api call implementation. But this happens intermittently like 2nd or 3rd time when we try to load the page

Continue reading...