[Angular] How to return a component for a cell?

[rosensama]

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

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>`;
    },
  })

[mathieuszek]

Hello, did you try with something like: https://tanstack.com/table/latest/docs/framework/angular/angular-table?

In my case I needed to display column with percent pipe:

interface X {
    percentageValue: number,
}

public readonly columns: ColumnDev<X>[] = [{
    accessorKey: 'percentageValue',
    cell: data => new FlexRendererComponent(PercentageCellComponent, { value: data.getValue<number>(), }),
}];
@Component({
  standalone: true,
  selector: 'app-table-percentage-cell',
  imports: [PercentPipe],
  template: `
    {{ value() | percent }}
  `,
})
export class PercentageCellComponent {

  public readonly value = input.required<number>();

}

[rosensama]

Thanks. I thought I had read everything. FlexRenderComponent looks like what I was missing.

https://tanstack.com/table/latest/docs/framework/angular/angular-table#rendering-a-component