K
K
Konstantin2020-08-14 19:35:18
Angular
Konstantin, 2020-08-14 19:35:18

How to build component template recursively?

I have an app-document-form-node component that receives a tree model and renders nested components.

<app-document-form-node [parent] = "block" [block] = "tree"> </app-document-form-node>

The main entity is a block. There can be several fields or blocks inside a block.

Inside this component template, during the block build process, I check the block type to render a specific component:

<ng-container * ngIf = "block.tag === 'ADRESATS'">
      <app-adresat-list [parent] = "block" [adresats] = "block.children"> </app-adresat-list>
 </ng-containe>


The app-adresat-list component has a template where I call the app-document-form-node recursively :

<ng-container *ngFor="let block of adresats">
    <div class="document-block">
        <div class="document-block__title">
            {{ block.title }}
        </div>

        <div class="document-block__body">
            <ng-container *ngFor="let bl of block.children">
                <app-document-form-node [parent]="parent" [block]="bl"></app-document-form-node>
            </ng-container>
        </div>
    </div>
</ng-container>


So the problem is that I want to avoid duplicating the template code in the app-adresat-list component because it's <div class = "document-block">already present in the app-document-form-node .

How to display child elements (blocks and nested fields) in app-adresat-list using app-document-form-node ?

The full code of the project is on stackblitz

There was another attempt:

<ng-container *ngIf="block.tag === 'ADRESATS'">
                <app-adresat-list [parent]="block">
                    <ng-container *ngFor="let adresat_block of block?.children">
                        <ng-container *ngFor="let bl of adresat_block.children">
                            <app-adresat [block]="bl">
                                <app-document-form-node [parent]="adresat_block.children" [block]="bl"></app-document-form-node>
                            </app-adresat>
                        </ng-container>
                    </ng-container>
                </app-adresat-list>
            </ng-container>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question