Angular virtual scroll for variable heights
   
ng-vscroll-box is a Angular virtual scroll for items with variable heights, especially chat like interfaces.
1. Install with peer dependencies
``sh`
npm install ng-vscroll-box resize-observer-polyfill lodash.debounce --save
2. Update your app module
`js
import { NgVscrollBoxModule } from 'ng-vscroll-box';
...
@NgModule({
...
imports: [
...
NgVscrollBoxModule,
],
...
})
export class AppModule { }
`
3. Use the ng-vscroll-box tag. Each item in items array must have unique key named id. This value is used internally for caching sizes.
`html
>
*ngFor="let item of scrollRef.viewPortItems"
[vscrollItemId]="item.id"
>
{{item.name}}
4. Specify height and/or width using CSS
`css
ng-vscroll-box {
height: 80vh;
/ width: 500px; /
/ border: 1px solid silver; /
}
`Peer Dependencies
*
resize-observer-polyfill 1.5.x - polyfill until all browsers support ResizeObserver
* lodash.debounce 4.x.x - for debounce function
Properties
- [items]: Array required The array of objects passed to the virtual scroll. It's important that each array item is an object with a unique key named
id or idProp described below.-
[idProp]: string optional, default value id Name of the unique key in every item in
items. This will be used internally for tracking. The value of the unique key can be number or string.-
(changeEvent): ChangeEvent Emits
viewPortItems which has to be looped to generate list components, startIndex and endIndex.-
(updateEvent): UpdateEvent Emits values
atTop, atBottom, scrollTop, scrollHeight.Methods
-
scrollToTop() Scrolls to top
-
scrollToBottom() Scrolls to bottom
-
scrollToId(id: number | string) Scrolls to item. Pass the
idProp value of the item.-
scrollToPosition(top: number) Scrolls to pixel position
Values
`
.-----------. - - -
| | | | contentTop* |
| .-------. | | scrollTop - - |
| | | | | | |
.-+-+-------+-+-. - - | |
| | | | | | | | |
| | | | | | | height | contentHeight* | scrollHeight
| | | | | | | | |
-+-+-------+-+-' - | |-------' | - |
| | |
| | |
-----------' - * internal values
``