CODEWITHSUNDEEP
javascriptangularangular-materialvirtualscroll
Itai
Itai

Reputation: 417

Angular Virtual Scroll with dynamic variable height/width?

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?

Upvotes: 12

Views: 23223

Answers (4)

dhilt
dhilt

Reputation: 20734

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

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

Upvotes: 5

Yipin Xiong
Yipin Xiong

Reputation: 47

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.

Upvotes: -2

Eric Ferreira
Eric Ferreira

Reputation: 31

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)

Upvotes: 2

ronenmiller
ronenmiller

Reputation: 1137

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

Upvotes: 6

Related Questions