How to pass selected table items to function in Angular/PrimeNg

Question

I have this code snippet of a table with items. After I select my items I want to pass them to my function. It it possible do it in the html?

<p-table [value]=items>
<ng-template pTemplate="body" let-item>
<tr [pSelectableRow]="item">
    <td>
         <p-tableCheckbox
          [pSelectableRow]="applicationProject"
          [value]="item"
          ></p-tableCheckbox>
   </td>
   <td class="cell-breakWord">
         {{ item.name }}
   </td>
   <td>{{ item.id }}</td>
   ...
</tr>
</p-table>
<p-button (onClick) = "function(selectedItemsIWantToPass)">Button</p-button>

score 0 · Accepted Answer · answered Jul 19 '23 at 13:30

Refer to the Row selection demo in PrimeNG table, it provides the [(selection)] two-way binding variable to bind the selected item to the variable.

<p-table [value]="items" [(selection)]="selectedItems">
  ...
</p-table>

<p-button (onClick)="onClick(selectedItems)">Button</p-button>

selectedItems: any[] = [];

Thus, you can get/access the selected item(s) in the component without the need to pass the value from the view.

Note that in <p-template> you are declaring the item variable with let-item. You should pass the item instead of applicationProject to the [pSelectableRow].

<ng-template pTemplate="body" let-item>
  <tr [pSelectableRow]="item">
      <td>
           <p-tableCheckbox
            [pSelectableRow]="item"
            [value]="item"
            ></p-tableCheckbox>
     </td>
     <td class="cell-breakWord">
           {{ item.name }}
     </td>
     <td>{{ item.id }}</td>
     ...
  </tr>
</ng-template>

Demo @ StackBlitz

How to pass selected table items to function in Angular/PrimeNg

1 Answers1