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

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;
}
angularscrollangular-cdk


Solution 1:[1]

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

if you have any other problem share an example.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Klodian
Solution 2 Syscall

Related Questions