Getting error "Cannot read property '_switchDataSource' of undefined" with Angular 11

[DwightTheMan]

Getting error: Cannot read property '_switchDataSource' of undefined at TableItemSizeDirective.ngAfterContentInit (ng-table-virtual-scroll.js:168)

with Angular 11. Table data doesn't load.

[diprokon]

Hi! Can You provide some code example with the issue?

[leahtz]

I have the same error in angular 9 my code: <cdk-virtual-scroll-viewport tvsItemSize="itemsize" [ngStyle]="height: totalheight"> <table mat-table [dataSource]="dataSource">

</table>

initilaize dataSource: this.dataSource=new TableVirtualScrollDataSource(this._data);

[leahtz]

update: my code usin ng-template like this: <cdk-virtual-scroll-viewport tvsItemSize="itemsize" [ngStyle]="height: totalheight">

... <ng-template #theTable> <mat-table [dataSource]=datasource ...

[jdessaint]

Hello, here an example of the issue. I'm started from the base example in the provided documentation. I moved the table in <ng-template> and I called this with *ngTemplateOutlet in the <cdk-virtual-scroll-viewport>.

[javidg07]

Hello @diprokon it works fine in development but when we run test case we get the same issue with **_switchDataSource of undefined from ngViewContentInit ....** <cdk-virtual-scroll-viewport tvsItemSize [ngStyle]="height: totalheight"> but if we add just itemSize ="20" testcase runs but it fails to load the data without any error in chrome.

[armorildo]

I had the same issue with the mat-table with virtual scroll. The code structure was something like:

<ng-template>
  <cdk-virtual-scroll-viewport tvsItemSize="itemsize">
    <table mat-table [dataSource]="dataSource">

What worked for me was placing the virtual scroll viewport inside a container div, and not directly inside the ng-template, like below:

<ng-template>
  <div>
    <cdk-virtual-scroll-viewport tvsItemSize="itemsize">
      <table mat-table [dataSource]="dataSource">