Angular Data Grid

Cell Components

angular logo

The example below shows adding images, hyperlinks, and buttons to a cell using Custom Cell Components.

Custom Components

The interface for the Cell Component is as follows:

interface ICellRendererAngularComp {
   // Mandatory - Params for rendering
   agInit(params: ICellRendererParams): void;

   // Mandatory - Return true if you have managed the cell refresh yourself in this method, otherwise return false.
   // If you return false, the grid will remove the component from the DOM and create a new component in its place 
   // with the new values.
   refresh(params: ICellRendererParams): boolean;

The Component is provided props containing, amongst other things, the value to be rendered.

class CustomButtonComponent implements ICellRendererAngularComp {
  // ...
  agInit(props: ICellRendererParams): void {
    this.cellValue = props.value;
  // ...

The provided props (interface ICellRendererParams) are: