Pass row index to event handler in data table

3
votes

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?

2
angularprimeng

2 Answers

7
votes

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);
}
2
votes

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.