Ngx-datatable show icon on hover

Question

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>

score 0 · Answer 1 · answered Sep 17 '18 at 17:32

0

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>

answered Sep 17 '18 at 17:32

Chellappan வ

23,645
3
29
60

is it highlighting all row? – Chellappan வ Sep 17 '18 at 18:00

score 0 · Answer 2 · answered Nov 07 '19 at 13:39

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

Ngx-datatable show icon on hover

2 Answers2