Angular cdk-virtual-scroll-viewport not taking max height until screen is resized

Question

TLDR: have a list of items that need to be in a virtual scroll. It works fine, but only takes up ~30% of the space available until the screen size is changed. (make the dev tools larger).

---

On initial page load:

After resizing the page:

Here is a stripped back version of the template:

    <cdk-virtual-scroll-viewport class="Viewport" itemSize="50">
      <div *cdkVirtualFor="let item of threadsDetails$ | async" class="Item">
        {{ item.thread.id }}
      </div>
    </cdk-virtual-scroll-viewport>

scss:

.Viewport {
  height: 100%;
}

.Item {
  border-bottom: solid 1px black;
  height: 50px;
}

After looking into the Angular chrome tools, it seems that the ngDoCheck is triggered on page resize.

Things i have tried to solve this:

• subscribe to the list datasource and do a markForCheck
• call ngOnInit on the ViewChild for the cdk-virtual-scroll-viewport. (this works, but i still get the initial 30% then after re initing the full height is taken).

Any ideas?

Answer 1

Have fixed this. Needed to call checkViewportSize() on CdkVirtualScrollViewport.

@ViewChild(CdkVirtualScrollViewport, { static: false })
private cdkVirtualScrollViewport: CdkVirtualScrollViewport;

this.threadDetailsSubscription = this.threadsDetails$
      .pipe(
        distinctUntilChanged(),
      )
      .subscribe(() =>
        this.cdkVirtualScrollViewport?.checkViewportSize(),
      );