Ag-grid how to use angular material component in plain js renderer

Question

I am trying to use angular material component inside plain js renderer, as stated in ag-grid document, using framework renderer is slow.

However, if I just put the material component code in plain js, it will not render the material component properly

class plainJsRadioRenderer {
  eGui: any;

  // gets called once before the renderer is used
  init(params) {
      // create the cell
      this.eGui = document.createElement('div');
      this.eGui.innerHTML = `<mat-radio-button>Option 1</mat-radio-button>`;
  }

  getGui() {
      return this.eGui;
  }

  // gets called whenever the cell refreshes
  refresh(params) {
    return false;
  }
}

Above is my attempt, but it will just directly paste the mat-radio-button inside the grid cell without processing it.

So how to use material component with plain js renderer? Thanks

u will have to add the required classes as well and import the module as well — YogendraR
I already import the module in angular module and inside component.ts. but still don't work — kk-at-cbx
Required classes did you mean the renderer class? if yes then I already put my class in the same component for the ag-grid — kk-at-cbx

Mazdak Mazdak · Accepted Answer · 2021-08-12T14:53:34

when you give ag-grid cellRenderer a function it just calls the function with row specific params and puts the results into the innerHtml of the cell. but when you want to use the Angular component/directive tag (<mat-radio-button> is also a directive github), Angular should render it for you. this is the missing part. because of this, ag-grid lets you use Components with the framework solution which renders the Component before putting it into the cell. so as I know you have three options:

1- use Component as renderer and pay the optimization cost. 2- make regular radio button like material ones with CSS. 3- ask the UX designer to design a simpler UI for the radio button.

Ag-grid how to use angular material component in plain js renderer

1 Answers