How to nest components dynamically?

Question

Angular

I have the following object:

let obj = {id: 1, children: [{id: 4,  children: [{id: 5}, id: 1]}]}

In the app-root component, I traverse the object from the `obj .children` root:

<ng-container *ngFor="let element of obj?.children">
    <div *ngIf="element.type == 'block">
    <app-adresat-list *ngIf="element.id == 3" [parentBlock]="parentBlock" [list]="element?.children"></app-adresat-list>
      ... еще несколько других компонентов тут по условию
</div>
<div *ngIf="element.type = 'field'">
    <app-field [field]="element"></app-field> <!-- Отрисовывает элемент формы по типу (input, select и тд)
</div>
</ng-container>

In turn, each of the app-adresat-list and app-field components in its template calls again <app-root [children]="element">to check if the element has children and draw them.

As a result, all this leads to circual dependency components.

How to correctly build the nesting of different components based on the desired object with data?

Can somehow apply ng-content projection?

Answer 1

At one time I met with this task on one project, the solution resulted in the library https://github.com/zircon63/ng-torque .
Used viewref create component
https://www.github.com/zircon63/ng-torque/tree/mas...