CODEWITHSUNDEEP
angularag-grid
Logbahadur Gurkha
Logbahadur Gurkha

Reputation: 1631

Angular ag-grid : How to render HTML in cell?

I am using "ag-grid-angular": "^23.1.0", "ag-grid-community": "^23.1.0"
I want to render custom data in a column, i.e. innerHTML as for example:

<i class="feather icon-edit-1 "></i>

I even searched in ag-grid documentation, but was unable to find a solution.

Upvotes: 2

Views: 6782

Answers (2)

Parth Developer
Parth Developer

Reputation: 1887

To render HTML you need to use cellRenderer property of ag-grid. This solution works best with me :

customActions = function () {
  return '<span><a routerLink="/apps/your-path"><i class="users-edit-icon feather icon-edit-1 mr-50"></i></a><i class="users-delete-icon feather icon-trash-2"></i></span>';
};

// ag-Grid column defination
public columnDefs = [
  {
    headerName: 'Actions',
    cellRenderer: this.customActions
  }
];

Upvotes: 3

Nitin Lawande
Nitin Lawande

Reputation: 613

ag grid Angular Cell Render Components

    import { ChildMessageRenderer } from './child-message-renderer.component';
    @Component({
      selector: 'my-app',
      template: `
     <div class="example-wrapper">
  
  <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [context]="context"
    [frameworkComponents]="frameworkComponents"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>
 `,
})
 export class AppComponent {
 private gridApi;
 private gridColumnApi;

 private columnDefs;
private rowData;
private context;
private frameworkComponents;
private defaultColDef;

constructor() {
this.columnDefs = [
  {
    headerName: 'Row',
    field: 'row',
    width: 150,
  },
  {
    headerName: 'Square',
    field: 'value',
    colId: 'square',
    width: 150,
  },
  {
    headerName: 'Child/Parent',
    field: 'value',
    cellRenderer: 'childMessageRenderer',
    colId: 'params',
    width: 180,
  },
 ];
 this.rowData = createRowData();
 this.context = { componentParent: this };
 this.frameworkComponents = {
  childMessageRenderer: ChildMessageRenderer,
 };


methodFromParent(cell) {
 alert('Parent Component Method from ' + cell + '!');
}
}

Cell Renderer

    import { Component } from '@angular/core';
    import { ICellRendererAngularComp } from '@ag-grid-community/angular';

   @Component({
  selector: 'child-cell',
  template: `
  <span
  ><button
    style="height: 20px"
    (click)="invokeParentMethod()"
    class="btn btn-info"
  >
    Invoke Parent
  </button></span
>
`
})
 export class ChildMessageRenderer implements ICellRendererAngularComp {
  public params: any;

 agInit(params: any): void {
  this.params = params;
 }

public invokeParentMethod() {
this.params.context.componentParent.methodFromParent(
  `Row: ${this.params.node.rowIndex}, Col: 
${this.params.colDef.headerName}`
 );
}

refresh(): boolean {
 return false;
 }
}

refer link - https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components

Upvotes: 0

Related Questions