list-item.component.html

<div class="list" *ngIf="list && list.length > 0">
    <div class="list-node" *ngFor="let node of list; let first = first; let last = last;">

        <!-- button to expand / close node -->
        <button type="button" mat-icon-button (click)="toggleChildren(node.id)" class="">
            <mat-icon class="mat-icon-rtl-mirror">
                {{showChildren(node.id) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
        </button>

        <!-- existing node: show label in form; value is e.g. {{node.labels[0].value}} -->
        <app-list-item-form [iri]="node.id" [language]="language" (refreshParent)="updateView($event, true)"
                            [projectIri]="projectIri" [projectCode]="projectCode" [projectStatus]="projectStatus" [labels]="node.labels"
                            [position]="node.position" [lastPosition]="last" [parentIri]="parentIri">
        </app-list-item-form>


        <!-- recursion: list with child nodes -->
        <app-list-item class="child-node" *ngIf="node.id === expandedNode && node.children.length > 0"
                       [language]="language" [childNode]="true" [list]="node.children" [parentIri]="node.id"
                       [projectIri]="projectIri" [projectCode]="projectCode" [projectStatus]="projectStatus" (refreshChildren)="updateParentNodeChildren($event, node.position)">
        </app-list-item>


        <!-- in case of none children: show form to append new item  -->
        <div *ngIf="node.id === expandedNode && node.children.length === 0 && projectStatus" class="child-node">
            <!-- first child should have an empty list? yes -->
            <app-list-item-form class="append-child-node" [parentIri]="node.id" [projectIri]="projectIri"
                                [projectCode]="projectCode" [language]="language" [newNode]="true"
                                (refreshParent)="updateView($event, true)">
            </app-list-item-form>
        </div>

        <!-- form to append new item to parent node -->
        <app-list-item-form class="list-node append-child-node" *ngIf="last && projectStatus" [parentIri]="parentIri"
                            [projectIri]="projectIri" [projectCode]="projectCode" [language]="language"
                            [newNode]="true" (refreshParent)="updateView($event)">
        </app-list-item-form>

    </div>
</div>

<!-- new list to create if list is empty -->
<div class="list" *ngIf="list && list.length === 0 && projectStatus">
    <div class="list-node">
        <app-list-item-form [parentIri]="parentIri" [projectIri]="projectIri" [projectCode]="projectCode"
                            [language]="language" [newNode]="true" (refreshParent)="updateView($event)">
        </app-list-item-form>
    </div>
</div>