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>
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>