How to scroll two lists at once with angular cdk virtual scroll?

Question

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.

Answer 1

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>