How to bind the data dynamically in Tree Node[].i.e How to loop and fetch the data in Tree Node[] in Angular 8.

[Sriji N]

sample.html

----------- 

 <p-treeTable [value]="childAnnual" [columns]="cols">

        <ng-template pTemplate="header" let-columns>

            <tr>

                <th *ngFor="let col of cols">

                    {‌{col.header}}

                </th>

            </tr>

        </ng-template>

        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">

            <tr>

                <td *ngFor="let col of childAnnual; let i = index" ttEditableColumn [ngClass]="{'ui-toggler-column': i === 0}">

                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>

                    <p-treeTableCellEditor>

                        <ng-template pTemplate="input">

                            <input pInputText type="text" [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}">

                        </ng-template>

                        <ng-template pTemplate="output">{‌{rowData[col.field]}}</ng-template>

                    </p-treeTableCellEditor>

                </td>

            </tr>            

        </ng-template>

    </p-treeTable>

component.ts

------------

myfiles: TreeNode[] = [

    {

      data: { name: 'Cloud', size: '20mb', type: 'Folder', },

      children: [

        { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', }, },

        { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', }, },],

    },

    {

      data: { name: 'Desktop', size: '20mb', type: 'Folder', },

      children: [

        { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', }, },

        { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', }, },],

    }

  ];

[Sriji N]

1. sample.html:

1.  
2.  
3. <p-treeTable [value]="childAnnual" [columns]="cols">
4. <ng-template pTemplate="header" let-columns>
5. <tr>
6. <th *ngFor="let col of cols">
7. {‌{col.header}}
8. </th>
9. </tr>
10. </ng-template>
11. <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
12. <tr>
13. <td *ngFor="let col of childAnnual; let i = index" ttEditableColumn [ngClass]="{'ui-toggler-column': i === 0}">
14. <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
15. <p-treeTableCellEditor>
16. <ng-template pTemplate="input">
17. <input pInputText type="text" [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}">
18. </ng-template>
19. <ng-template pTemplate="output">{‌{rowData[col.field]}}</ng-template>
20. </p-treeTableCellEditor>
21. </td>
22. </tr>
23. </ng-template>
24. </p-treeTable>
25.  
26.  
27.  
28.  

1. sample.component.ts: