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
>
[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
*
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
. This will be used internally for tracking. The value of the unique key can be number or string.-
(changeEvent): ChangeEvent Emits
which has to be looped to generate list components, startIndex and endIndex.-
(updateEvent): UpdateEvent Emits values
, atBottom, scrollTop, scrollHeight.Methods
-
scrollToTop() Scrolls to top
-
Scrolls to bottom
-
Scrolls to item. Pass the
value of the item.-
scrollToPosition(top: number) Scrolls to pixel position
Values
.-----------. - - -
| | | | contentTop* |
| .-------. | | scrollTop - - |
| | | | | | |
.-+-+-------+-+-. - - | |
| | | | | | | | |
| | | | | | | height | contentHeight* | scrollHeight
| | | | | | | | |
-------' | - |
| | |
| | |
-----------' - * internal values
``