#StackBounty: #css #angular #performance #ag-grid #angular-directive Render additional info in cell when row is hovered in ag-grid

Bounty: 50

I am using angular (^8.2.14) and ag-grid-community (^20.1.0).

I try to achieve the following effect: when the user hovers a specific row, one column shows an additional button which may be clicked.

What does work?
The column with the wanted behaviour gets rendered by a custom cell renderer component which implements the ICellRendererAngularComponent interface. There I can inject the ElementRef and on the lifecycle hook AfterContentChecked I check the parents’ parent for the css-class ‘ag-row-hover’ and if it’s there, I will show this additional button in the renderer component.

custom-cell.component.ts

@Component({
  selector: 'app-custom-cell',
  template: `
      <ng-container *ngIf="hovered; else notHovered">{{form.value * form.value}}
        <button (click)="doStuff(form.value)">show root</button></ng-container>
      <ng-template #notHovered>{{form.value + form.value}}</ng-template>
  `,
})
export class CustomCellComponent implements ICellRendererAngularComp, AfterContentChecked {
  form: FormControl;
  params: ICellRendererParams;
  hovered = false;

  constructor(private elementRef: ElementRef) {
  }

  doStuff(val) {
    alert(val);
  }

  ngAfterContentChecked() {
    this.hovered = (this.elementRef.nativeElement as HTMLElement)
      .parentElement
      .parentElement
      .classList.contains('ag-row-hover');
  }
}

The source code for this is on github

What do I want to improve?
I want to improve the performance and not having explicit checks for this behaviour. I’d rather have a directive with the css-selector ‘.ag-row’, which I can inject to the ICellRendererAngularComponent and then check for the css class ‘.ag-row-hover’ on every check. Or have a directive with the css-selector ‘.ag-row-hover’ which is there, or is not. Anyone has any ideas how to improve my existing solution?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.