Angular Virtual Scroll display issues

Question

I have been trying to find a solution for a couple of days for this, but can't seem to find one.

We have a lot of mat-cards loading and thought it best to add virtual-scrolling, however it immediately changed the display to rows (showing all the mat-cards stacked below one another). I have rewritten the section a couple of times to no avail.

<div fxLayout style="margin-top: 40px" class="row">
    <cdk-virtual-scroll-viewport [itemSize]="20" class="example-viewport">
      <div fxFlex.gt-md="265px" fxFlex.lg="265px" *cdkVirtualFor="let course of courses | courseDrop : typeView | courseTemp: courseSearch">
        <mat-card class="course-card" >
         ...content
        </mat-card>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>

kvetis · Accepted Answer · 2021-03-31 13:59:00Z

Yes, that is the limitation for virtual scroll - it works with rows.

If you need to have items displayed next to each other, you need to split those in the component into groups and have the virtual scroll work on groups.

Since you're using breakpoints, you'd need to do some work on listening to breakpoint changes. You can do that by using the MediaObserver.

You would need to adjust the filtering or do it in the component. I'm leaving that out.

function split<T>(input: T[], groupSize: number): T[][]  {
  const out: T[][] = [];
  for(let i=0; i < input.length; i += groupSize) {
    out.push(input.slice(i, i + groupSize));
  }
  return out;
}


mediaObserver.media$.subscribe((change: MediaChange) => {
      
      if ( change.mqAlias == 'xs') {
         this.viewCourses = split(this.courses,1);
      }
      if ( change.mqAlias == 'md') {
         this.viewCourses = split(this.courses,2);
      }
      if ( change.mqAlias == 'lg') {
         this.viewCourses = split(this.courses,3);
      }
    });


<div fxLayout style="margin-top: 40px" class="row">
    <cdk-virtual-scroll-viewport [itemSize]="20" class="example-viewport">
      <div *cdkVirtualFor="let courses of viewCourses">
        <div fxFlex.gt-md="265px" fxFlex.lg="265px" *ngFor="let course of courses">
        <mat-card class="course-card" >
         ...content
        </mat-card>
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>

Agung Sudrajat · Accepted Answer · 2022-07-06 17:22:11Z

0

I have just found the solution to this. It seems weird when the card suddenly changed to another card before finished.

What I did:

CSS file:

make height of each item fit-content:

.number { height: fit-content; }
make the container class:

.container { min-height: 100vh; }
then in the template:
The ID: {{ sundanese.number }}

It worked for me. I hope it works for you too.

edited Jul 6, 2022 at 17:22

answered Jul 6, 2022 at 17:14

Agung Sudrajat

3281 silver badge10 bronze badges

1 Comment

Agung Sudrajat Over a year ago

well, number 3 is not what I meant. The code formatter not working as properly here.

Collectives™ on Stack Overflow

Angular Virtual Scroll display issues

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related