Angular ngx数据表列中的鼠标悬停事件

我需要在鼠标上方更改ngx数据表的其中一列，即当用户悬停一行时主要显示按钮，当不悬停一行时显示标签。 我使用的是：数据表

代码如下：

Html:

---

尝试在ur.ts文件中使用@HostListener尝试在ur.ts文件中使用@HostListener

    <ngx-datatable-column prop="created">
  <ng-template ngx-datatable-header-template>
    Created 

  </ng-template>
  <div (mouseover)="getMouseOver()" (mouseleave)="getMouseLeave()">
    <ng-template ngx-datatable-cell-template let-row="row" let-column="column" let-value="value" ngIf="isHoverButtonVisible">
      {{value|timeSince}}
    </ng-template>

    <ng-template ngx-datatable-cell-template let-row="row" let-column="column" let-value="value" ngIf="!isHoverButtonVisible">
     Hello
    </ng-template>
  </div>

</ngx-datatable-column>

  getMouseOver() {
   this.isHoverButtonVisible = true;
  }

  getMouseLeave() {
    this.isHoverButtonVisible = false;
  }