Render complex structured components on the fly

Question

I'm trying to make a feature in my applications. It works like a drag and drop editor. I need to drop a component into a determined area and the application have to build the component on the fly. With simple components that doesn't have children (an input for example) it works fine with this code:

const componentFactoryResolver = moduleRef.componentFactoryResolver;
const factories = Array.from(componentFactoryResolver['_factories'].keys());
const factoryClass = <Type<any>>factories.find((x: any) => x.name === component.name);
const factory = componentFactoryResolver.resolveComponentFactory(factoryClass);
const componentRef: ComponentRef<any> = factory.create(this.injector);
this.appRef.attachView(componentRef.hostView);

But when i have to render a component that must have children (like a table) it doesnt work.

Example of the struture that i have to build to build to it works:

<app-table value="dataValues">
    <app-table-column prop='foo'>
        <app-table-header>Foo </table-header>
    </app-table-column>
    <app-table-column prop='lorem'>
        <app-table-header>Lorem</table-header>
    </app-table-column>
</app-table>

component app-table structure:

<table>
    <thead>
        <tr>
            <th class="table-tree-header" *ngFor="let column of columns">
                <ng-container *ngTemplateOutlet="column.template"></ng-container>
            </th>
        </tr>
    </thead>
    <tbody>
        <app-table-row *ngFor="let row of dataSource; let i = index"
            [id]="row['id']"
            [row]='row'
            [columns]='columns'
            class="table-tree-row"
            [parentId]="row['parentId']"
            [isParent]="row['isParent']"
            [rowIndex]='i'
            [lvl]="row['lvl']">
        </app-table-row>
    </tbody>
</table>

app-table-column structure:

<ng-template>
    <ng-content>
    </ng-content>
</ng-template>

app-table-header structure:

<ng-content></ng-content>

app-table-row strutcure:

<tr>
    <td class="table-row" *ngFor="let column of columns">
        {{row[column.prop]}}
    </td>
</tr>

Plus: When I have to drop an independent compontent inside another independent component it also works. My problem is when the components depends each other to render properly. Can anyone help me please?

Answer 1

In my research to find a solution i found that QueryList doesn't uptade when I drop the column component 'cause the component is just a template without content.

So I had to change the drop event to update the QueryList directly:

const col = new TableColumnComponent();
col.prop = 'plataforma';
this.table.columns.reset([...this.table.columns.toArray(), col]);

I know it isn't the perfect solution, but it works.