virtual-scroll: support items of unknown size

[mmalerba]

Support virtual scrolling over a list of items whose size is not known and needs to be measured

[amcdnl]

Been testing autosize and seems to work pretty well.

[fxck]

Is this released? Or are any extra steps needed? I'm getting

ERROR Error: StaticInjectorError(AppModule)[CdkVirtualScrollViewport -> InjectionToken VIRTUAL_SCROLL_STRATEGY]: 
  StaticInjectorError(Platform: core)[CdkVirtualScrollViewport -> InjectionToken VIRTUAL_SCROLL_STRATEGY]: 

edit: looks like you need to have both

import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk-experimental/scrolling';

imported for autosize to work

[webcat12345]

Looking forward to see this feature! 👍

[fxck]

It seems to be working fine in most of the time, except that there is always an empty space on the bottom that keeps increasing in size each time you scroll down and up a bit.

[webcat12345]

@fxck could you please share some of your code to show how to use this feature?

[fxck]

Just import import { ScrollingModule } from '@angular/cdk-experimental/scrolling'; and use it with autosize directive.

<cdk-virtual-scroll-viewport [style.height.px]="height" autosize>
  <div *cdkVirtualFor="let item of list">{{ item }}</div>
</cdk-virtual-scroll-viewport>

[webcat12345]

yes, it works for me :)

[webcat12345]

But if I use autosize strategy it can not use many functions such as scrollToIndex() ...
Is there any alternative way? For example I am going to scroll to bottom

[fxck]

That's most likely the reason why this is experimental and not in stable. It's just not finished and feature complete yet.

[webcat12345]

I see. I have tested autosize feature with a list of 121000 + different height items and it works well without any lag. 👍
Is there any ETA for this feature? (but with normal functions as well :) ) This is really cool. We are going to use this for our project and really want to see this to be released!!!

[webcat12345]

any update on this feature?

[bop10]

@mmalerba Any updates on this? Thanks

[flolu]

Will this be implemented in production soon?

[salsadoka]

I've been trying to get autosize strategy to work based on fxck's example, but keep getting this error: "Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'div'. " Any suggestions?

[ravanasa]

I've been trying to get autosize strategy to work based on fxck's example, but keep getting this error: "Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'div'. " Any suggestions?

Try with the cdk version angular 6.0.2

[easyproger]

any updates ? 7.0.4 angular say - Can't bind to 'cdkVirtualForOf'
angular 6.4.7 bug with autosize ( end scroll with space )

[jonnyleeharris]

any updates ? 7.0.4 angular say - Can't bind to 'cdkVirtualForOf'
angular 6.4.7 bug with autosize ( end scroll with space )

Have you tried importing both the core and experimental scroll modules? I found this alleviated the Can't bind to cdkVirtualForOf issue.

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';

@NgModule({
  declarations: [
    AppComponent  
  ],
  imports: [
    BrowserModule,  
    ScrollingModule,
    ExperimentalScrollingModule,    
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[jonnyleeharris]

But if I use autosize strategy it can not use many functions such as scrollToIndex() ...
Is there any alternative way? For example I am going to scroll to bottom

I am scrolling to the bottom as follows:

    let top = this.viewport.measureScrollOffset("top");
    let bottom = this.viewport.measureScrollOffset("bottom");
    let offset = top + bottom;    
    this.viewport.scrollToOffset(offset);

However, there are a few layout bugs it appears - but it's to be expected since it is still an experimental feature.

[LeonadoRivaldo]

Any updates on this?

[easyproger]

any updates ? 7.0.4 angular say - Can't bind to 'cdkVirtualForOf'
angular 6.4.7 bug with autosize ( end scroll with space )

Have you tried importing both the core and experimental scroll modules? I found this alleviated the Can't bind to cdkVirtualForOf issue.

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';

@NgModule({
  declarations: [
    AppComponent  
  ],
  imports: [
    BrowserModule,  
    ScrollingModule,
    ExperimentalScrollingModule,    
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

yeah but im get error - itemSize need to be set... if im set 0, ofc scroll load all items... if set any size scroll work not like autosized (((

[BleedingDev]

I have this:

"@angular/cdk": "^7.3.3",
"@angular/cdk-experimental": "7.3.3",

import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

imports: [ScrollDispatchModule, ScrollingModule],

And everything works ok with autosize.

[tobiasmuecksch]

Is this feature ever going to be implemented?

[asifnkhan]

Any update on this? Is this not being considered anymore?

[gtteamamxx]

any update?

[tobiasmuecksch]

@gtteamamxx I have given up hope on this. This issue is +4 years old.

There is a pretty good react plugin. Maybe it's possible to integrate that into angular somehow.

[ewalddieser]

@gtteamamxx I have given up hope on this. This issue is +4 years old.

There is a pretty good react plugin. Maybe it's possible to integrate that into angular somehow.

@tobiasmuecksch

It is indeed possible to use react components in angular. Here's an article.
https://netbasal.com/using-react-in-angular-applications-1bb907ecac91

Which React component would you recommend for this?

[tobiasmuecksch]

@ewalddieser According to this Stackoverflow question react-virtualized contains a component called CellMeasurer which should solve most of the use cases.

I haven't had the time yet, to try to integrate react components. If you are successful, it would be nice to share your experience here.

[SvenBudak]

If you have something like a image wall where all images have the same size, but they are depending on parent container width,
should it now be possible in a performant way with: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Just get the size of the first image and pass it to the virtual scroll. Ofc its not the solution for people they have alot different sized elements... but maybe it helps people they are trying to make a image board like me.

[tobiasmuecksch]

@SvenBudak Thank you for your input. But as this issue's title suggests, we need a solution for items of unknown (and potentially unequal) size.

My use case is a chat app. The items of interest are chat bubbles, which by nature have individual sizes.

[kevinkishoretsi]

Is it any other possibility to implement auto size in the virtual scroll

[KanaguT]

Do we have any update on production release date for this ?

[JoranLive]

4 year later, still the same.

Dont expect something...

[aymericl]

Any update ? Someone has a workaround ? How do you deal with this problem ?
Thanks.

[spike-rabbit]

@mmalerba we have the need for the autosize strategy in a project, but using experimental is something that should be avoided. I could invest some time to complete the implementation there so that autosize can be moved to the @angular/cdk package. Before I start, just a few questions:

• Is this even open for community contributions?
• What is needed to make autosize stable? I already saw that things related to scrollIndex are missing
• Why are these things not implemented yet? Time or are there any major problems?
• Do you have any suggestions how the missing features can be implemented?

Sorry in case I missed something, the issue is quite long already

[mmalerba]

@spike-rabbit Yes, the reason for it being still experimental is that scrolledIndexChange and scrollToIndex are not implemented. It's been a while since I looked at it, so I don't remember the exact problem I ran into trying to implement them, but I do remember it being tricky. So to answer your questions:

• Is it open for contributions: I'm willing to review a contribution for this, but just so you're aware, despite being experimental this is used by a few teams inside Google, which means I'll need to confirm it doesn't break their apps before any solution can be merged
• What's needed to make it stable: Just the 2 methods I mentioned above + tests that confirm they work as expected. I'd probably want to land those changes in cdk-experimental, then do a followup PR to graduate it to cdk
• Why its not done yet: Mainly a lack of time / other higher priorities, but I do remember it being somewhat tricky to implement correctly
• Suggestions for implementing: Unfortunately I don't really have much context on it at this point. The general idea of how the autosize virtual scroll works is that it keeps track of the amount of error between where it thinks our theoretical scroll position should be and where it actually is and then try to slowly eliminate that error as the user scrolls. There's also some buffer elements rendered before and after the ones actually visible in the viewport, which might make it tricky figuring out which one is that actual current scrolled to index (it won't necessarily just be the first one rendered)

[timelinelink]

Hey @spike-rabbit thanks for trying to make some progress on this. Any idea if/when those changes may get merged? are you waiting on @mmalerba or something else? cc @andrewseguin

[spike-rabbit]

No real idea. This is some kind of side project for me, which I work on when nothing else is to do.

ATM I need to write proper unit tests for my changes before having a full review. Unfortunately, I am quite busy with other stuff.

However, I definitely plan to continue working here.

[paulthenightowl]

Make sure you dont have margins in your .list-item class, put the margins in the child class of .list-item instead and set the parent class of the list item to a static height.

Make sure that you only rendering list items in the viewport. If you want to render headings e.g. between the items you should add this "heading"-items as list items (also with a static height ) to get rid of overflow space in the bottom of the virtual-scroll viewport.

If it still not working call checkViewportSize when the user has scrolled to the bottom of the list to recalculate the viewport height

[khushbupatel2]

why when I use autosize time scrolledIndexChange and scrollToIndex are not work can you help: what should I do>

[HyperLife1119]

It would be great if we could implement virtual scrolling (e.g. @for, @defer) on the control flow syntax!

[bmwz110]

An autosize strategy that works on elements of differing sizes is currently being developed in @angular/cdk-experimental, but it is not ready for production use yet.
-- from Angular Material Doc

It looks like this is exactly what the developers wanted, hope to see this support in official version soon.🌹