Getting checked items of tree table in an array

Question

I am working on angular app. I am using primeng tree table. My code is as follows:

<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"
>
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header }}
      </th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowNode
    let-rowData="rowData"
    let-columns="columns"
  >
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler
          [rowNode]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableToggler>
        <p-treeTableCheckbox
          [value]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableCheckbox>
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Stackblitz ::

https://stackblitz.com/edit/primeng-treetableselection-demo-xwgbzk?file=src%2Fapp%2Fapp.component.html

I want a new array in my component which catches all the elements which are checked by user. Suppose if user selects parents, as it is a tree table, so all children will get checked, so array will contains all the children elements. Suppose if user selects only one children than that particular children should be in that array and if user unchecks then these elements should get removed from array. How can I do that?

Answer 1

I have implemented a way to listen to checking and unchecking events emitted by prime ng table.

    nodeSelect(event) {
        this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name });
        this.addItemsToArray(event);
    }

    nodeUnselect(event) {
        this.messageService.add({ severity: 'info', summary: 'Node Unselected', detail: event.node.data.name });
        this.removeItemsFromArray(event);
    }

    selectedItems = [];

    addItemsToArray(event: any) {
        console.log(event);
        if (!event.node) return;
        if (event.node.children && !event.node.parent) {
            for (let child of event.node.children) {
                this.selectedItems.push(child.data);
            }
        } else if (event.node.data && event.node.parent) {
            this.selectedItems.push(event.node.data);
        }
        console.log('selectedItems after add:', this.selectedItems);
    }


    removeItemsFromArray(event: any) {
        console.log(event);
        if (!event.node) return;
        if (event.node.children && !event.node.parent) {
            for (let child of event.node.children) {
                this.selectedItems.splice(this.selectedItems.indexOf(child.data), 1);
            }
        } else if (event.node.data && event.node.parent) {
            this.selectedItems.splice(this.selectedItems.indexOf(event.node.data), 1);
        }
        console.log('selectedItems after remove:', this.selectedItems);
    }

Here is a working example: https://stackblitz.com/edit/primeng-treetableselection-demo-yl1xbx?file=src%2Fapp%2Fapp.component.ts