I'm trying to implement a ngx-datatable and I need to show the delete icon only when mouse is hovered over row. Now when I put the cursor over the row, it shows the delete icon in all rows and not the correct row. So, what is the proper way of doing this?
<ngx-datatable [rows]="rows"
class="material"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="0"
[footerHeight]="50"
[rowHeight]="'auto'"
[reorderable]="reorderable">
<ngx-datatable-column>
<ng-template let-column="column" ngx-datatable-header-template>
Title
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
<span class="title-date">{{row.title}} </span> <span class="author"> - {{row.author}} -</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column>
<ng-template let-column="column" ngx-datatable-header-template>
Date
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
<span class="title-date">{{row.created_at | dfnsDistanceInWordsToNow }}</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column>
<ng-template let-column="column" ngx-datatable-header-template>
Action
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
<mat-icon (click)="openDialogWithoutRef(row._id)" class="show-on-hover" class="inline-icon">delete</mat-icon>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
Use mouseleave and mouseover event to get the current hovered element then use ngClass to set the class dyanmically
toggle=[];
<ng-template let-row="row" ngx-datatable-cell-template>
<mat-icon (click)="openDialogWithoutRef(row._id)" (mouseover)="toggle[row._d]=true"
(mouseleave)="toggle[row._id]=false"
[ngClass]="{'show-on-hover':toggle[row._id]" class="inline-icon">delete</mat-icon>
</ng-template>
ngx-datatable has an activate output that you can use to listen for either mouse click, mousenter or keyup events. So you can simply do this:
<ngx-datatable
class="material"
[rows]="users$ | async"
[columnMode]="ColumnMode.force"
[headerHeight]="50"
[footerHeight]="50"
rowHeight="auto"
(activate)="onActivate($event)"
>
<ngx-datatable-column name="First Name">
<ng-template let-row="row" ngx-datatable-cell-template>{{ row && row.staff_id.first_name }}</ng-template>
</ngx-datatable-column>
...
So you can write a function to handle the mouseenter event. Only issue is it does not fire a mouseleave event, which is what I've been trying to figure out.
PS: You should check for the event type to make sure it is a mouseenter, for your use case. Something like this
onActivate (e) {
const { type, row } = e;
if (type === 'mouseenter') {
this.showAction = row._id;
}
}
Here's a link to the docs
https://swimlane.gitbook.io/ngx-datatable/api/table/outputs#activate
I hope this helps...
Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.