I'm getting an object from an API. It has an array which contains 2 types of objects, I have to loop over this array and render two different components depending on the object at each index.
Both types of components need @Inputs and @Outputs to work properly, so I can't use <ng-container> like showing in this question.
What's the best way to implement something like this?
If you only have 2 components, then you could use something like this to check which component type to render:
<ng-container *ngFor="let item of items">
<ng-container *ngTemplateOutlet="<type check condition here> ? type1 : type2; context: { $implicit: item }">
</ng-container>
</ng-container>
<!-- in each one of these templates you can access the item in the array via "item" -->
<ng-template #type1 let-item>
<!-- render component for type 1 here -->
</ng-template>
<ng-template #type2 let-item>
<!-- render component for type 2 here -->
</ng-template>
You might want to look into ngSwitch as well if the number of component types increases in the future.