javascriptangularprimengprimeng-table

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


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>


Solution

  • 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