CODEWITHSUNDEEP
angularprimeng
Emdee
Emdee

Reputation: 1693

Pass row index to event handler in data table

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

Answers (2)

Manoj Babu Balaraman
Manoj Babu Balaraman

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

Meir
Meir

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

Related Questions