Mohammed Ameen
Sep 1, 2018 · 1 min read

hi, this virtual-scroll is working fine in my project but my issue is when i add two tables with two different tabs then the data is playing around…in 1st tab the table with virtual-scroll is working fine and when i click on the 2nd tab then virtual scroll is disabled and only 2 to 3 row in the table are showing…

my working code is this:

<mat-tab-group >

<mat-tab label=”Active”>

<cdk-virtual-scroll-viewport class=”list-container list-group” autosize>

<div *cdkVirtualFor=”let size of fixedSizeData; let i = index” class=”list-group-item” [style.height.px]=”size”>

{{i}}

</div>

</cdk-virtual-scroll-viewport>

</mat-tab>

<mat-tab label=”isActive”>

<cdk-virtual-scroll-viewport class=”list-container list-group” autosize>

<div *cdkVirtualFor=”let size of fixedSizeData; let i = index” class=”list-group-item” [style.height.px]=”size”>

{{i}}

</div>

</cdk-virtual-scroll-viewport>

</mat-tab>

</mat-tab-group>

    Mohammed Ameen

    Written by