My goal is to display a link on mouseover of the corresponding cell in ngx-datatable. However, the link appears on all rows within that column instead. Below is the code I am currently using:
<ngx-datatable
class="material ml-0 mr-0"
[rows]="users"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="50"
[limit]="10"
[rowHeight]="'auto'">
<ngx-datatable-column name="User Name" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Role" [flexGrow]="1">
<ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template let-value="value">
<div (mouseenter)="showRoleOpt(rowIndex,true, $event)" (mouseleave)="showRoleOpt(rowIndex,false, $event)">{{ row?.role }} <a *ngIf="showRoleOptions">Change</a></div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="First Name" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.firstName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Name" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Email" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.email }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Phone Number" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.phoneNumber }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Actions" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
<button mat-icon-button mat-sm-button color="primary" class="mr-1" (click)="openPopUp(row)"><mat-icon>edit</mat-icon></button>
<button mat-icon-button mat-sm-button color="warn" (click)="deleteItem(row)"><mat-icon>delete</mat-icon></button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
TypeScript Code:
showRoleOpt(row, opt: boolean, $event) {
console.log($event.target);
this.showRoleOptions = opt;
}
I attempted to assign an ID to the div to inspect the event for potential solutions, but have not found any hints.