Reputation: 1693
I use a data table from PrimeNG and have the following template code:
<p-column [style]="{'width':'40px'}">
<template let-col let-rowData="rowData" let-rowIndex="rowIndex" pTemplate type="body">
<button type="text" pButton icon="fa-remove" style="height: 20px; width: 25px"
(click)="onDeleteDataProviderDefinitionClicked($rowIndex)"> </button>
</template>
</p-column>
I want to tell the event handler method "onDeleteDataProviderDefinitionClicked" which row index has been clicked. Therefore I tried to pass the respective rowIndex to its method signature. However, the value is later on undefined.
Any ideas how to accomplish it?
Upvotes: 3
Views: 16116
Reputation: 217
Template Code
<p-column [style]="{'width':'40px'}">
<template let-col let-rowData="rowData" let-i="rowIndex" pTemplate type="body">
<button type="text" pButton icon="fa-remove" style="height: 20px; width: 25px"
(click)="onDeleteDataProviderDefinitionClicked(i)"> </button>
</template>
Typescript Code
onDeleteDataProviderDefinitionClicked(rowIndex) {
console.log(rowIndex);
}
Upvotes: 9
Reputation: 14405
You have a redundant $
:
(click)="onDeleteDataProviderDefinitionClicked(rowIndex)"
and not $rowIndex
The reason you see in the samples $event
it is because it is a reserved word for the default event.
Upvotes: 2