How to make dynamic validations using ng-content/templateOutlet?

The problem is this: I'm trying to do something similar to what from react-admin (https://marmelab.com/react-admin/Datagrid.html) does, but for Angular. The idea is to be able to use a table on a page to which custom components are passed (they extend ControlValueAccessor so that formControls can be passed to them):

page.html:

<app-table-v5>
<ng-container table-body>
<app-custom-input-select></app-custom-input-select>
<app-custom-input-text></app-custom-input-text>
</ng-container>
</app-table-v5>


table-v5.html:

<div>
@for (item of items; track $index) {
<ng-content select="[table-body]"></ng-content>
}
</div>


Using content-projection, I have two problems:

1. 
   I can't iterate the projection because it only keeps the last iteration, generating empty components.
   
   
2. 
   I don't see a way to use validations since I can't associate formGroups with the content (because I don't have it in the table-v5 component).
   

Using templates with ngTemplateOutlet, I have one problem:

1. The configurations required to associate validations with custom components are very cumbersome (forcing me to pass information from the parent to the child and the child to return information using ‘ngTemplateOutletContext’ so that the parent can use it in the template).

As I explained above, I need a component (table) to be able to receive different custom components, to which I can associate validations

Continue reading...