ng-template with mat-table inside cdk-virtual-scroll-viewport

Question

I am trying to use the content from ng-template to render inside cdk-virtual-scroll-viewport but I am getting an error

<cdk-virtual-scroll-viewport tvsItemSize [footerEnabled]="true"
                             [headerEnabled]="false">
    <ng-container *ngTemplateOutlet="operationTable;context:{$implicit:operationTableDataSource}">
    </ng-container>
</cdk-virtual-scroll-viewport>

<ng-template #operationTable>
    <mat-table>
        .....
    </mat-table>
</ng-template>

ERROR TypeError: Cannot read properties of undefined (reading '_switchDataSource') at TableItemSizeDirective.ngAfterContentInit (ng-table-virtual-scroll.mjs:186:40)

If I don't use ng-template and copy the content directly, it all works fine. For ex; below code works fine

<cdk-virtual-scroll-viewport tvsItemSize [footerEnabled]="true"
                             [headerEnabled]="false">
    <mat-table>
        .....
    </mat-table>
</cdk-virtual-scroll-viewport>

Does anyone know how to use ng-template with cdk-virtual-scroll-viewport or is this a limitation of cdk-virtual-scroll? I can add more information if required but I hope the question and problem is clear.

Answer 1

Your title and your post do not mention anything about the current library you're using, which is ng-table-virtual-scroll . Very misleading I would say.

I went to the library source code and what they do is they get the table by using ContentChild which doesn't work with ngTemplateOutlet

//look for the MatTable under the directive
 @ContentChild(MatTable, { static: false })
  table: MatTable<any>;

Since this is the internal lib code, you won't be able to change it, so the answer is no, you can't use ngTemplateOutlet with this library