Virtualized Table with Signals in Angular 20

[ethanlchristensen]

I just wanted to post on here to see if anyone has had success creating a Virtualized TanStack table using Angular 20. I understand that the angular-virtual library is on Angular 18 so understand if it isn't supported.

I have a set up like such:

// ... ... 
data= signal<Message[]>([]);

sorting = signal<SortingState>([])

sortIcons = { asc: '🔼', desc: '🔽' }

getSortIcon(sorting: false | SortDirection) {
  return sorting ? this.sortIcons[sorting] : null
}

table = createAngularTable(() => ({
  data: this.feedbackMessages(),
  columns: feedBackColumns,
  state: {
    sorting: this.sorting(),
  },
  onSortingChange: (updaterOrValue) =>
    typeof updaterOrValue === 'function'
      ? this.sorting.update(updaterOrValue)
      : this.sorting.set(updaterOrValue),
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  columnResizeMode: 'onChange',
  defaultColumn: {
    minSize: 60,
    maxSize: 800,
  },
  debugTable: true,
}));

rows = computed(() => this.table.getRowModel().rows);

virtualizer = injectVirtualizer(() => {
  const element = this.scrollElement();
  return {
    scrollElement: element,
    count: this.data().length,
    estimateSize: () => 40,
    overscan: 20,
    enabled: !!element,
  };
});

readonly columnSizingInfo = computed(() => this.table?.getState().columnSizingInfo || {});

readonly columnSizing = computed(() => this.table?.getState().columnSizing || {});

readonly columnSizeVars = computed(() => {
  void this.columnSizing()
  void this.columnSizingInfo()
  const headers = untracked(() => this.table?.getFlatHeaders() || [])
  const colSizes: { [key: string]: number } = {}
  let i = headers.length
  while (--i >= 0) {
    const header = headers[i]!
    colSizes[`--header-${header.id}-size`] = header.getSize()
    colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
  }
  return colSizes
})

ngOnInit() {
    this.apiService.getMessages().subscribe({
      next: (result: PagedResult<Message>) => {
        this.feedbackMessages.set(result.items);
      }
    });
}

//.......

Though, everytime, I am met with the following error. Is this an issue with my implmentation or the angular-virtual library?