Support exposing the currently rendered `itemsPerRow`

[lincolnthree]

It is sometimes useful to understand how many items per row are currently being rendered, outside of the component itself. Something like this:

virtual-scroll.component.ts: line 291

// The bounds of the scroll container, in pixels
const renderedBounds: VirtualScroll.Rect = {
   left: scrollPosition.x,
   top: scrollPosition.y,
   right: scrollPosition.x + scrollContainer!.clientWidth,
   bottom: scrollPosition.y + scrollContainer!.clientHeight
};
 const bufferLengthPx = (scrollContainer!.clientHeight) * bufferLength;

// Calculate the number of rendered items per row
   this.itemsPerRow = gridList ? Math.floor(scrollContainer!.clientWidth / itemWidth!) : 1; // <-- just set this on the component instance and expose it?
   const virtualScrollHeight = items.length * itemHeight! / this.itemsPerRow;

// Adjust the bounds by the buffer length and clamp to the edges of the container

page.html

<li-virtual-scroll #scroll></li-virtual-scroll>

page.ts

  @ViewChild(VirtualScroll<Card>, { static: false }) scroll: VirtualScroll<Card>;

...

someFunction() {
   const rowLength = this.scroll.itemsPerRow ?? 1;
   ...
}

[lincolnthree]

Or, possibly create a method to call to get the current item specs:

const { itemHeight, itemWidth, itemsPerRow } = this.scroll.getItemDimensions()

[lincolnthree]

PS. This is quite possibly the best multi-column virtual scroll library I have EVER tested, and I've been looking for a replacement for ngx-virtual-scroll for a LONG time - for years. I'm super impressed by this, and the way you've created a thin-wrapper for responsive components that presents a very fluent design using annotations and simple APIs. I haven't grokked all of it yet, but so far ... very nicely done.

[Sampath-Lokuge]

Have you used this with Angular 15+?

[lincolnthree]

@Sampath-Lokuge Yes! I had to modify the package.json, but it works great. I've tested on Safari, and Chrome, as well as iOS and Android Webview, so far.

[Sampath-Lokuge]

Ok sure, thanks a lot!

[lVlyke]

@lincolnthree Makes sense! itemsPerRow is now exposed as a public property in the upcoming 0.3.0 version.

[lVlyke]

@lincolnthree Really appreciate the feedback! I made the library largely out of frustration of being unable to find a satisfactory multi-column virtual scroll implementation. Glad to see others are finding it useful!