Questions tagged angular-cdk-virtual-scroll

Explore the latest questions and answers asked by our top developers.

Why is @angular/core/core has no exported member ‘ɵɵFactoryDeclaration’. error thrown when using angular cdk virtual scroller

I installed CDK Virtual Scroller in my ionic 5.3.3 project: npm add @angular/cdk The version is: "@angular/cdk": "^13.0.2" The scroller viewport wraps a ion-item-group: <ng-template #showContentBlock> <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350" > <ion-item-group> <ion-item-sliding *cdkVirtualFor="let test of tests"> <ion-item class="notification-item" lines="none" > <ion-avatar slot="start"> <img src="./assets/tests/tests6.jpg"> </ion-avatar> <ion-row class="notification-item-wrapper" (click)="openTestModal(test)"> <!– <ion-col size="1"> <app-aspect-ratio [ratio]="{w: 1, […]

Angular virtual scroll not working correctly for nested for loop

The Angular Material cdk-virtual-scroll-viewport property is not working correctly for nested *cdkVirtualFor or *ngFor. The viewport is split into two and the scroll does not work as expected. Please assist in listing in viewport with parent and child. <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let parent of parents"> <h4>{{ }}</h4> <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let child of children"> […]

cdk virtual scroll viewport with child table row

i am using cdk-virtual-scroll-viewport for virtual scroll in Angular 11 i want to show virtual scroll on child table row, so how can i implement for table row only, here is the screenshot of my table and code. <cdk-virtual-scroll-viewport [itemSize]="100" style="height: 450px;"> <table class="table table-bordered tabledesign"> <thead> <tr> <th []="inverseOfTranslation" style="position: sticky !important;" *ngFor="let col […]

Angular infinite virtual scrolling minBufferPx and maxBufferPx

According to the official documentation of angular virtual scrolling minBufferBx and maxBufferPx Supposed that we have the following parameters: itemSize = 50, minBufferPx = 100, maxBufferPx = 250. As the user is scrolling through the content the viewport detects that there is only 90px of buffer remaining. Since this is below minBufferPx the viewport must […]

How to extend the CdkVirtualScrollViewport angular material component?

I currently have a use case where I would like to extend the CdkVirtualScrollViewport component so I could have access to its rendered template. The specific case is that the base template renders a <div #contentWrapper class="cdk-virtual-scroll-content-wrapper"> which wraps the <ng-content> passed. I would like to have a way to pass an extra content outside […]

Setting number of items for cdk-virtual-scroll-viewport

I have found a number of tutorials for using the cdk-virtual-scroll-viewport, but there is one thing missing from every single tutorial I have found so far: how do I tell the viewport how many items are in my list? I have implemented this using a BehaviorSubject for the datastream according to this tutorial and a […]

Angular cdk-virtual-scroll-viewport return 0 when calling getBoundingClientRect

I have a table component which is contained inside cdk-virtual-scroll-viewport. One of the column cell contains ‘..more’ option that expands the entire row. But when scrolled up/down the row collapses due to the nature of scroll-viewport(user wants it to stay expanded). I resolved this by adding display: contents. cdk-virtual-scroll-viewport { height: 100%; min-height: 200px; display: […]

Wrong number of items when cdk-virtual-scroll is hidden by default

If the cdk-virtual-scroll is hidden by default with display:none, it shows only 4 items when it’s displayed again. I did a simple Stackblitz to reproduce the bug. If you change the value of the hideCdkVS variable to false in virtual-scroll.component.ts, it works fine. Do you know any workaround for this ? Source: Angular Material Quesions

Angular virtual scrolling

We are using Angular 10.0.9. and I just tried to add virtual scrolling to a page and followed the official documentation: Import ScrollingModule in app.module.ts Add the cdk-virtual-scroll-viewport with an itemSize and add a *cdkVirtualFor to iterate the array The browser logs the following exception (tried with different browsers): Do you guys have an idea […]

How to make cdk virtual scroll itemSize auto or change by condition

enter image description here I have this piece of code in .html file that just loops through formArray controls and displays a component. The length of formArray is by default one, and can increase or decrease over time. I want the item size to be changeable or auto. Please help me to find a way […]

1 4

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us