Угловой стол из дерева

Question

Я реализовал компонент дерева, который принимает вложенные данные и рекурсивно отображает их в пользовательском интерфейсе.

<tr *ngFor="let node of nodes" style="width:100%">
<td>
    <span *ngIf="node[key].length" [ngClass]="node.isVisible ? 'fa fa-minus col-mr-5':'fa fa-plus col-mr-5'" (click)="toggle(node)">
    </span>
</td>
<td>
    {{node.Name}}
    <div id="expanded-data-nodes" *ngIf="node.isVisible">
        <table id="nested-table">
            <tree-table *ngIf="node[key].length" [key]="key" [data]="node[key]"></tree-table>
        </table>
    </div>
</td>

<td>{{node.Age}}</td>
<td>{{node.Gender}}</td>
<td>{{node.Country}}</td>

public toggleChildren(data: any) {
    data.isVisible = !data.isVisible;
}

Я хочу, чтобы все узлы таблицы дерева были расширены по умолчанию.

Я попытался удалить * ngIf = "item.isVisible" из div, и он по умолчанию расширяет все строки при загрузке, однако разворачивание разворота работает, и я вижу все значки как fa-plus.