ag-grid Angular - 如何通过标记/HTML 自定义列

Question

I am new to ag-grid and planning to implement that for our Angular project. It looks great except it's support for cell templating . Unlike PrimeNG or Devextreme I don't see a "templating" feature for the column.

Most of the documentation of ag-grid explains how to customize the cell via "cellrenderer" in component.ts class. I want to customize the cell via html instead of.ts

Below code is part of PrimeNG to customize the cell via template. Can someone help me to implement the same in ag-grid via html

<ng-template pTemplate="body" let-product>
        <tr>
            <td>{{product.name}}</td>
            <td><img [src]="'assets/showcase/images/demo/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td>
            <td>{{product.price | currency:'USD'}}</td>
            <td>{{product.category}}</td>
            <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
            <td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
        </tr>
    </ng-template>

Thanks for your help on this.

Answer 1

You can return an angular component instead of just plain text. You can do this using cellRendererFramework that you can access from the column definition.

{
          headerName: "CLIENT",
          field: "client",
          cellRendererFramework: (params) => {
            return <AgGridCellRenderer>
              
            </AgGridCellRenderer>
          },
        },

the params argument has all the agRid stuff like ´api and columApi` as well as the original cell value as well as the entire row data.