ag-grid Angular - How to customize the column via Markup/HTML

user_1349052 0
Viewed 322

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.

ag-grid-angular ag-grid angular10 angular javascript
1 Answers

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 ´apiandcolumApi` as well as the original cell value as well as the entire row data.

user_66416930
Related