Angular cdk-virtual-scroll-viewport: does not render correct number of items

Question

I am using cdk-virtual-scroll-viewport to dynamically render items a small set at a time as the user scrolls.

The viewport only displays 5 items, regardless of the height given to the cdk-virtual-scroll-viewport element.

In the component, I load an array of 100 strings.

Each item is 48px in height. The viewport is set to 480px in height. So, I expect to see 10 items at a time. It only renders 5.

In the html:

                <cdk-virtual-scroll-viewport itemSize="48" class="viewport">
                    <mat-option *cdkVirtualFor="let person of filteredPersons"
                        [value]="person" class="animated slideInRight">
                        <div class="option-user">
                            <img class="image-cropper"
                                src="......"
                                alt="User Picture" />
                            {{person}}
                        </div>
                    </mat-option>
               </cdk-virtual-scroll-viewport>

In the css:

.viewport {
    height: 480px; 
}

.option-user {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

Answer 1

I had the same bug and just fixed increasing default values of minBufferPx and maxBufferPx.

Answer 2

Take a look at this example angular-virtual-scroll-example

if you have any other problem share an example.

Answer 3

Add the following in global file

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;
}