virtual scroll on Angular 7 is not visible - the height is zero by default

Question

Scenario:

• Tried a basic virtual scroll test reading this blog post
• the array had lots of items
• there was no error
• the list loaded in a virtual scroll but the height of it was 0 by default

quick fix was to

• set the height for cdk-virtual-scroll-viewport to 500px or set the height for class 'example-viewport' in app.component.css

Question: what is the proper way to overcome this zero height?

sample at https://stackblitz.com/edit/angular-efdcyc

Answer 1

• use min-height of 100% for the viewport and verify
• make sure, the height set on the viewport with 'itemSize' matches the height of the item in css

• if you are using an Observable, make sure to resolve it with *ngIf and the async pipe. Important: the html element is an ng-container, because it may not be rendered for the min-width to work!

    .list {
       min-height: 100%;
    }
  
    .item {
       height: 100px;
    }
  

When using an Observable as a source

<ng-container *ngIf="obs$ | async; let data">
  <cdk-virtual-scroll-viewport itemSize="100" class="list">