[SOLVED] Tanstack Table in Angular - How to return a component for a cell?

Tanstack Table in Angular - How to return a component for a cell?

I'm having trouble figuring out how to use an Angular component to be rendered as cell contents in a TanStack Table.

In ag-grid I could use the cellRenderer field on a ColDef for this.

  {
    headerName: 'No',
    valueGetter: p => p.data?.textAndIconData,
    cellRenderer: TextAndIconRendererComponent,
    sortable: false,
    wrapText: false,
  },

I didn't see anything in the API docs that stood out to me. I've seen the question asked for React where you can return JSX in the return of the cell function. But that doesn't work for me. In the example below, at first the output for the first row viewed in dev tools was just <span><span>&nbsp1</span></span>. Then I updated the innerHTML to trust the HTML. <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(cell)"></div>. Now the output is as expected, but I don't think Angular invoked the mat-icon component because the <mat-icon> tag is rendered literally: <span><span>&nbsp1</span><mat-icon font-icon="lock-open-right" /></span>.

  tanStackColHelper.display({
    id: 'textAndIcon',
    header: 'Index',
    cell: info => {
      const rowNumber = info.row.index + 1;
      const isOpen = info.row.original.isOpen;
      let result = `<span>${rowNumber.toFixed(0).padStart(2, String.fromCharCode(160))}</span>`;
      if (isOpen) {
        result += '<mat-icon font-icon="lock-open-right" />';
      } else {
        result += '<mat-icon font-icon="lock" />';
      }
      return `<span>${result}</span>`;
    },
  })

I'm not sure if I need to learn something about TanStack Table or Angular here. Using the lastest version of each. Thanks for taking a look.

EDIT: the mat-icon example is a simple case and while @Some of the Things answer would work for just a mat-icon, I am looking for a more general solution. I want to be able to render any arbitrary component as cell contents.

Solution