Angular Virtual Scroll with dynamic variable height/width?

Question

I'm looking for an angular virtual scroll package with following functionality: 1) Horizontal virtual scroll 2) Container width and height are fluid. 3) Items width set in percentage of the container width. 4) Items can be minimized during render.

Angular cdk currently works with fixed itemSize for height and width.... here is an example of how it should be rendered:

.parent {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
}
.child {
  width: 33.333%;
  height: 100%;
}
.child.mini {
  width: 40px;
}

<div class="parent">
  <div class="child" *ngFor="let item of items" [class.mini]="item.isMini">
    <button (click)="item.isMini = !item.isMini">Minimize Me!</button>
    {{item.name}}
  </div>
</div>

Any recommendation?

Answer 1

The Angular team is working on an autosize directive which enables scrolling with different items sizes.

You can see an example using @angular/cdk-experimental here .
Keep in mind that this is EXPERIMENTAL and is not recommended for production use at the moment, but it does give you the feel and if you really need it, it could help.

Also, check out the github issue

Answer 2

The ag-virtual-scroll component give support the virtual scroll with differents row height, but the scroll works only vertical.

NPM: https://www.npmjs.com/package/ag-virtual-scroll

DEMO PAGE: https://ericferreira1992.github.io/ag-virtual-scroll/ (second example)

Answer 3

You may try ngx-ui-scroll. Speaking of your requirements, it supports

• horizontal orientation,
• dynamic items size,
• late items size changes.

Not sure about %-base dimensions, I suppose you'll have to reconsider the templating in you app. Templating and data flow... Hope this helps.

Answer 4

If you do not want to autosize directive as earlier mentioned,

Here is an alternative way:

I have solved the issue by dynamically passing in the height value:

<cdk-virtual-scroll-viewport #scrollViewport 
[itemSize]="itemSize" [style.height.px]="viewPortHeight">
</cdk-virtual-scroll-viewport>

Note that: my viewport component was put within an <ng-template>;

itemSize and viewPortHeight are variables defined in the context.