[AngularJS] 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]

   
   1. sample.html:
   2.  
   3.  
   4. <p-treeTable [value]="childAnnual" [columns]="cols">
   5. <ng-template pTemplate="header" let-columns>
   6. <tr>
   7. <th *ngFor="let col of cols">
   8. {‌{col.header}}
   9. </th>
   10. </tr>
   11. </ng-template>
   12. <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-
   columns="columns">
   13. <tr>
   14. <td *ngFor="let col of childAnnual; let i = index" ttEditableColumn [
   ngClass]="{'ui-toggler-column': i === 0}">
   15. <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-
   treeTableToggler>
   16. <p-treeTableCellEditor>
   17. <ng-template pTemplate="input">
   18. <input pInputText type="text" [(ngModel)]="rowData[col.field]" [
   ngStyle]="{'width': i == 0 ? '90%': '100%'}">
   19. </ng-template>
   20. <ng-template pTemplate="output">{‌{rowData[col.field]}}</ng-template>
   21. </p-treeTableCellEditor>
   22. </td>
   23. </tr> 
   24. </ng-template>
   25. </p-treeTable>
   26.  
   27.  
   28.  
   29.  
   30. sample.component.ts:
   31.  
   32. myfiles: TreeNode[] = [
   33. {
   34. data: { name: 'Cloud', size: '20mb', type: 'Folder', },
   35. children: [
   36. { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', }, },
   37. { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', }, },],
   38. },
   39. {
   40. data: { name: 'Desktop', size: '20mb', type: 'Folder', },
   41. children: [
   42. { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', }, },
   43. { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', }, },],
   44. }
   45. ];
   46.  

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/1cf58130-2d12-45d3-9de9-8c46464f5ad1%40googlegroups.com.