0

I am not able to bind the cdk-virtual-scroll-viewport with data in my Angular html.

This is the data in my jobLists array which is assigned with response data in ngOnInit

enter image description here

In my html class i have sample like this

<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let currentJob of jobLists">
  <mat-card class="job-list">
    <div class="posted-on">
      <span class="loc">Posted On</span>: {{ currentJob.posteddate }}
    </div>
         
  </mat-card>
</div>

I already imported

 import { ScrollingModule } from '@angular/cdk/scrolling';

in my appmodule.ts

I checked project.json CDK is already there.

And when i try to display using normal *ngFor values are displaying without any issues.

Anything else do i need to add to this work?

UPDATE

When i try to simply display numbers with 10000 , its coming up correctly. So it looks like the issue with binding value. Any idea whats wrong with my value?

UPDATE 2

I think it has some role with [itemSize]="100" style="height: 900px;overflow-y:auto;" Now its coming and I modified my .ts

jobToDisplay: any; decalred it like this and assigned

this.jobToDisplay = this.jobLists;

Now its bindingb but when i touch heightproperty it will not bind..

Nithin Paul
  • 2,169
  • 3
  • 33
  • 55

1 Answers1

0

you have to define a fixed height as css rule when you change the list or the page height you need to control the viewport size

this.cdkVirtualScrollViewport? .checkViewportSize ()

where

@ViewChild (CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport
Emanuele Galeotti
  • 49
  • 6