Angular 4 - Primeng Datatable - Edit and detail in the same row

Question

I am using ng prime DataTable to show data in a html table.

In the same row of my DataTable I can edit row and see detail in modals windows.

This is the html code:

<p-dataTable (onRowSelect)="onRowSelect($event)" [value]="registers" selectionMode="single" [(selection)]="selectedRegister">
    <p-column>
        <ng-template pTemplate="body">
            <a (click)="editRegister(register)"><i class="fa fa-pencil" aria-hidden="true"></i></a>
        </ng-template>
    </p-column>
    <p-column field="name" header="Name" [sortable]="true"></p-column>
</p-dataTable>

The problem is that when I click on the whole row, the function onRowSelect is executed but when I click on icon "fa-pencil" both functions
editRegister and onRowSelect are executed, but i want to execute only editRegister on click of edit(pencil icon) button.

How to achieve this ? thanks in advance

Answer 1

In case you still need a better solution you can try to add event.stopPropagation in your editRegister function (don't forget to pass event in parameters of course)