I'm using CDK VIRTUAL SCROLL in a table that loads a service (API) that returns me a list, with this list I can remove or return their columns respectively as well as their items, but when I remove all columns from the table and requested to return, just the columns ending up coming back normally but their items don't!
you can to have some like
<table>
<cdk-virtual-scroll-viewport #scroller itemSize="6" class="content">
<ng-container *cdkVirtualFor="let item of items; let i = index">
<thead *ngIf="!i">
<tr>
<td>Prop1</td>
<td>Prop2</td>
</tr>
</thead>
<tr>
<td style="min-width:10rem">
{{ item.prop1 }}
</td>
<td style="min-width:10rem">{{ item.prop1 }}</td>
</tr>
</ng-container>
</cdk-virtual-scroll-viewport>
</table>
With a "typical" cdkscroll
ngOnInit()
{
this.fetchMore();
this.scroller.elementScrolled().pipe(
map(() => this.scroller.measureScrollOffset('bottom')),
pairwise(),
filter(([y1, y2]) => (y2 < y1 && y2 < 140)),
throttleTime(200)
).subscribe(() => {
this.ngZone.run(() => {
this.fetchMore();
})
}
);
}
fetchMore(): void {
const newItems="......."
this.items=[...this.items,...newItems]
}
see a little stackblitz