Reputation: 10565
I would like to do something like this:
<cdk-virtual-scroll-viewport [itemSize]="25">
<svg>
<g *cdkVirtualFor="let item of items">...</g>
</svg>
<div *cdkVirtualFor="let item of items">...</div>
</cdk-virtual-scroll-viewport>
And have both the g
and div
elements scroll at at the same time (they both have the same height). Is this possible? Doing exactly as I have outlined here results in an error: Error: CdkVirtualScrollViewport is already attached.
Upvotes: 1
Views: 2082
Reputation: 582
Here is how I was able to achieve 2 lists with virtual-scroll: I combined the lists, added a type, sort your list by type, and did a break when type is changed:
TypeScript:
didGroupChange(jobNow:JobsResponse, jobPrev:JobsResponse){
return jobNow.type!==jobPrev?.type;
}
HTML:
<cdk-virtual-scroll-viewport [itemSize]="20" class="scroll-panel-jobs">
<dl>
<ng-container *cdkVirtualFor="let job of country?.jobsList; let index = index;">
<dt *ngIf="didGroupChange(job,country?.jobsList[index-1])" class="line row h15 title-job">{{job.type}}</dt>
<dd class="line row h16">{{job.title}} </dd>
</ng-container>
</dl>
</cdk-virtual-scroll-viewport>
Upvotes: 1