ng-virtual-list 21.11.3 → 22.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -68
- package/fesm2022/ng-virtual-list.mjs +5574 -3114
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/package.json +6 -5
- package/types/ng-virtual-list.d.ts +1438 -556
package/README.md
CHANGED
|
@@ -1,31 +1,26 @@
|
|
|
1
1
|
# NgVirtualList
|
|
2
2
|
|
|
3
|
-
🚀 High-performance virtual scrolling for Angular apps. Render
|
|
3
|
+
🚀 High-performance virtual scrolling for Angular apps. Render 10,000+ items in Angular without breaking a sweat. Smooth, customizable, and developer-friendly.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
⚡A powerful API for implementing lists of varying functionality and complexity.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
✨Flexible, and actively maintained Angular library that excels with high-performance, feature-rich virtualized lists—including grouping, sticky headers, snapping, animations, collapsing group elements, single and multiple selection of elements and both scroll directions, lists with scrolling bindings for elements, galleries of varying complexity, including 3D transformations of elements and effects such as MotionBlur, DOF (Depth Of Field) and Fog. Whether you're rendering millions of items or building interactive list components, it delivers scalability and customization. Angular (14–22) compatibility.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
🧬The main advantage of this solution is the elimination of the "empty spaces" effect during fast scrolling, which occurs in the classic implementation of virtualized lists. Visualization is as close as possible to native lists.
|
|
10
|
+
|
|
11
|
+
💻 Works correctly in all browsers and platforms.
|
|
12
|
+
|
|
13
|
+
💪 The software portion of the project was completed without a single line of code written using AI (artificial intelligence)!
|
|
10
14
|
|
|
11
15
|
<img width="1033" height="171" alt="logo" src="https://github.com/user-attachments/assets/b559cfde-405a-4361-b71b-6715478d997d" />
|
|
12
16
|
|
|
13
|
-
<b>Angular version
|
|
17
|
+
<b>Angular version 22.X.X</b>.
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|
|
17
21
|
|
|
18
22
|
|
|
19
|
-
[
|
|
20
|
-
[(Code)](https://github.com/DjonnyX/ng-virtual-list-chat-demo)
|
|
21
|
-
|
|
22
|
-
[News Feed Demo](https://news-feed-demo.eugene-grebennikov.pro/)
|
|
23
|
-
[(Code)](https://github.com/DjonnyX/ng-virtual-list-news-feed-demo)
|
|
24
|
-
|
|
25
|
-
[Live Examples (Storybook)](https://ng-virtual-list-examples.eugene-grebennikov.pro/)
|
|
26
|
-
|
|
27
|
-
[Examples](https://ng-virtual-list.eugene-grebennikov.pro/)
|
|
28
|
-
[(Code)](https://github.com/DjonnyX/ng-virtual-list-demo/tree/main/src/app)
|
|
23
|
+
[Documentation](https://ng-virtual-list.eugene-grebennikov.pro/)
|
|
29
24
|
|
|
30
25
|
<br/>
|
|
31
26
|
|
|
@@ -127,12 +122,12 @@ items = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `Item #${i}` })
|
|
|
127
122
|
Template:
|
|
128
123
|
```html
|
|
129
124
|
<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="1" [maxBufferSize]="5"
|
|
130
|
-
[itemRenderer]="horizontalItemRenderer" [dynamicSize]="false" [itemSize]="64" [
|
|
125
|
+
[itemRenderer]="horizontalItemRenderer" [dynamicSize]="false" [itemSize]="64" [selectingMode]="'select'"
|
|
131
126
|
[selectedIds]="2" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
|
|
132
127
|
|
|
133
128
|
<ng-template #horizontalItemRenderer let-data="data" let-config="config">
|
|
134
129
|
@if (data) {
|
|
135
|
-
<div [ngClass]="{'list__h-container': true, 'selected':
|
|
130
|
+
<div [ngClass]="{'list__h-container': true, 'selected': api.selected}">
|
|
136
131
|
<span>{{data.name}}</span>
|
|
137
132
|
</div>
|
|
138
133
|
}
|
|
@@ -177,8 +172,7 @@ export class AppComponent {
|
|
|
177
172
|
Template:
|
|
178
173
|
```html
|
|
179
174
|
<ng-virtual-list class="list" direction="horizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
|
|
180
|
-
[bufferSize]="1" [maxBufferSize]="5" [itemConfigMap]="horizontalGroupItemConfigMap" [dynamicSize]="false" [itemSize]="54" [
|
|
181
|
-
methodForSelecting="multi-select" [selectedIds]="[3,2]" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
|
|
175
|
+
[bufferSize]="1" [maxBufferSize]="5" [itemConfigMap]="horizontalGroupItemConfigMap" [dynamicSize]="false" [itemSize]="54" [stickyEnabled]="true" selectingMode="multi-select" [selectedIds]="[3,2]" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
|
|
182
176
|
|
|
183
177
|
<ng-template #horizontalGroupItemRenderer let-data="data" let-config="config">
|
|
184
178
|
@if (data) {
|
|
@@ -189,7 +183,7 @@ Template:
|
|
|
189
183
|
</div>
|
|
190
184
|
}
|
|
191
185
|
@default {
|
|
192
|
-
<div [ngClass]="{'list__h-container': true, 'selected':
|
|
186
|
+
<div [ngClass]="{'list__h-container': true, 'selected': api.selected}">
|
|
193
187
|
<span>{{data.name}}</span>
|
|
194
188
|
</div>
|
|
195
189
|
}
|
|
@@ -292,7 +286,7 @@ export class AppComponent {
|
|
|
292
286
|
Template:
|
|
293
287
|
```html
|
|
294
288
|
<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="1" [maxBufferSize]="5" [itemRenderer]="groupItemRenderer"
|
|
295
|
-
[itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [
|
|
289
|
+
[itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [stickyEnabled]="false"></ng-virtual-list>
|
|
296
290
|
|
|
297
291
|
<ng-template #groupItemRenderer let-data="data">
|
|
298
292
|
@if (data) {
|
|
@@ -319,7 +313,7 @@ Template:
|
|
|
319
313
|
Template (with snapping):
|
|
320
314
|
```html
|
|
321
315
|
<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="1" [maxBufferSize]="5" [itemRenderer]="groupItemRenderer"
|
|
322
|
-
[itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [
|
|
316
|
+
[itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [stickyEnabled]="true"></ng-virtual-list>
|
|
323
317
|
|
|
324
318
|
<ng-template #groupItemRenderer let-data="data">
|
|
325
319
|
@if (data) {
|
|
@@ -438,7 +432,7 @@ Virtual list with height-adjustable elements.
|
|
|
438
432
|
Template
|
|
439
433
|
```html
|
|
440
434
|
<ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [bufferSize]="1" [maxBufferSize]="5"
|
|
441
|
-
[itemConfigMap]="groupDynamicItemConfigMap" [
|
|
435
|
+
[itemConfigMap]="groupDynamicItemConfigMap" [stickyEnabled]="true"></ng-virtual-list>
|
|
442
436
|
|
|
443
437
|
<ng-template #groupItemRenderer let-data="data">
|
|
444
438
|
@if (data) {
|
|
@@ -533,8 +527,8 @@ export class AppComponent {
|
|
|
533
527
|
|
|
534
528
|
### Scrollbar castomization
|
|
535
529
|
|
|
536
|
-
[Examples](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
537
|
-
[CustomScrollbarComponent](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
530
|
+
[Examples](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/src/app/app.component.html)
|
|
531
|
+
[CustomScrollbarComponent](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/src/app/components/custom-scrollbar/custom-scrollbar.component.ts)
|
|
538
532
|
|
|
539
533
|
List items are encapsulated in shadowDOM, so to override default styles you need to use ::part access
|
|
540
534
|
|
|
@@ -595,41 +589,58 @@ Selecting even elements:
|
|
|
595
589
|
|
|
596
590
|
## 📚 API
|
|
597
591
|
|
|
598
|
-
### [NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
592
|
+
### [NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts)
|
|
599
593
|
|
|
600
594
|
Inputs
|
|
601
595
|
|
|
602
596
|
| Property | Type | Description |
|
|
603
597
|
|---|---|---|
|
|
604
|
-
|
|
|
598
|
+
| alignment | [Alignment](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/alignment.ts) | Determines the alignment of the list. Two modes are available: `none` and `center`. The `center` mode aligns the list items to the center of the viewport, ideal for use with the `itemTransform` property. The `none` mode means no alignment. The default value is `none`. |
|
|
599
|
+
| animationParams | [IAnimationParams](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/animation-params.ts)? = { scrollToItem: 50, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 } | Animation parameters. The default value is "{ scrollToItem: 50, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 }". |
|
|
605
600
|
| bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
|
|
606
|
-
|
|
|
607
|
-
| collapsedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
601
|
+
| clickDistance | number? = 40 | The maximum scroll distance at which a click event is triggered. |
|
|
602
|
+
| collapsedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts)> | Sets the collapsed items. |
|
|
608
603
|
| collapseByClick | boolean? = true | If `false`, the element is collapsed using the config.collapse method passed to the template; if `true`, the element is collapsed by clicking on it. The default value is `true`. |
|
|
609
|
-
|
|
|
610
|
-
|
|
|
604
|
+
| collapsingMode | [CollapsingMode](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/collapsing-modes.ts) | Mode for collapsing list items. Default value is `none`. `none` - List items are not selectable. `multi-collapse` - List items are collapsed one by one. 'accordion' - Accordion collapsible list items. Default value is `multi-collapse`. |
|
|
605
|
+
| collectionMode | [CollectionMode? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/collection-mode.ts) | Determines the action modes for collection elements. Default value is `normal`. |
|
|
606
|
+
| divides | number = 1 | Column or row numbers. The default value is `1`. |
|
|
607
|
+
| direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical". |
|
|
611
608
|
| dynamicSize | boolean? = true | If true, items in the list may have different sizes, and the itemSize property must be specified to adjust the sizes of items in the unallocated area. If false then the items in the list have a fixed size specified by the itemSize property. The default value is true. |
|
|
612
|
-
| enabledBufferOptimization | boolean? =
|
|
609
|
+
| enabledBufferOptimization | boolean? = false | Experimental! Enables buffer optimization. Can only be used if items in the collection are not added or updated. |
|
|
613
610
|
| id | number | Readonly. Returns the unique identifier of the component. |
|
|
614
|
-
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
615
|
-
| itemSize | number
|
|
611
|
+
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
|
|
612
|
+
| itemSize | number \| 'viewport' = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. If the dynamicSize property is true, the items in the list can have different sizes, and you must specify the itemSize property to adjust the sizes of the items in the unallocated area. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. |
|
|
613
|
+
| itemTransform | [ItemTransform](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/item-transform.ts) \| null = null | Custom transformation of element's position, rotation, scale, opacity and zIndex. The default value is `null`. |
|
|
616
614
|
| itemRenderer | TemplateRef | Rendering element template. |
|
|
617
|
-
| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
618
|
-
|
|
619
|
-
|
|
615
|
+
| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts) | Sets `sticky` position, `fullSize`, `collapsable` and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied.
|
|
616
|
+
If the `sticky` value is greater than `0`, then the `sticky` position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`.
|
|
617
|
+
`selectable` determines whether an element can be selected or not. Default value is `true`.
|
|
618
|
+
`collapsable` determines whether an element with a `sticky` property greater than zero can collapse and collapse elements in front that do not have a `sticky` property.
|
|
619
|
+
`fullSize` determines the size of an element when rendering lists with cell divisions. If sticky is 1 or 2, fullSize automatically becomes true. The default value is false. |
|
|
620
|
+
| langTextDir | [TextDirection? = 'ltr'](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/text-direction.ts) | A string indicating the direction of text for the locale. Can be either "ltr" (left-to-right) or "rtl" (right-to-left). |
|
|
620
621
|
| loading | boolean? = false | If `true`, the scrollBar goes into loading state. The default value is `false`. |
|
|
622
|
+
| maxBufferSize | number? = 10 | Maximum number of elements outside the scope of visibility. Default value is 10. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. |
|
|
623
|
+
| maxMotionBlur | number = 0.5 | Maximum motion blur effect. The default value is `0.5`. |
|
|
624
|
+
| selectingMode | [SelectingMode](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/selecting-mode.ts) | Method for selecting list items. Default value is 'none'. 'select' - List items are selected one by one. 'multi-select' - Multiple selection of list items. 'none' - List items are not selectable. |
|
|
625
|
+
| minItemSize | number \| 'viewport' = 1 | If the `dynamicSize` property is enabled, the minimum size of the element is set. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. |
|
|
626
|
+
| maxItemSize | number \| 'viewport' = Number.MAX_SAFE_INTEGER | If the `dynamicSize` property is enabled, the maximum size of the element is set. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. |
|
|
627
|
+
| motionBlur | number \| 'disabled' = 0.15 | Motion blur effect. The default value is `0.25`. |
|
|
628
|
+
| motionBlurEnabled | boolean = false | Determines whether to apply motion blur or not. The default value is `false`. |
|
|
621
629
|
| overscrollEnabled | boolean? = true | Determines whether the overscroll (re-scroll) feature will work. The default value is "true". |
|
|
630
|
+
| overlappingScrollbar | boolean? = false | Determines whether the scroll bar will overlap the list. The default value is "false". |
|
|
622
631
|
| selectByClick | boolean? = true | If `false`, the element is selected using the config.select method passed to the template; if `true`, the element is selected by clicking on it. The default value is `true`. |
|
|
623
|
-
|
|
|
624
|
-
| selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
632
|
+
| stickyEnabled | boolean? = false | Determines whether items with the given `sticky` in `itemConfigMap` will stick to the edges. Default value is "false". |
|
|
633
|
+
| selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts) \| null | Sets the selected items. |
|
|
625
634
|
| screenReaderMessage | string? = "Showing items $1 to $2" | Message for screen reader. The message format is: "some text `$1` some text `$2`", where `$1` is the number of the first element of the screen collection, `$2` is the number of the last element of the screen collection. |
|
|
626
|
-
| clickDistance | number? = 40 | The maximum scroll distance at which a click event is triggered. |
|
|
627
635
|
| waitForPreparation | boolean? = true | If true, it will wait until the list items are fully prepared before displaying them.. The default value is `true`. |
|
|
628
|
-
| scrollStartOffset |
|
|
629
|
-
| scrollEndOffset |
|
|
630
|
-
|
|
|
631
|
-
|
|
|
632
|
-
|
|
|
636
|
+
| scrollStartOffset | [FloatOrPersentageValue](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/float-or-persentage-value.ts) = 0 | Sets the scroll start offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition `50% + 25` or subtraction `50% - 25`. Default value is "0". |
|
|
637
|
+
| scrollEndOffset | [FloatOrPersentageValue](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/float-or-persentage-value.ts) = 0 | Sets the scroll end offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition `50% + 25` or subtraction `50% - 25`. Default value is "0". |
|
|
638
|
+
| snapToItem | boolean = false | Snap to an item. The default value is `false`. |
|
|
639
|
+
| snapToItemAlign | [SnapToItemAlign](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snap-to-item-align.ts) = [SnapToItemAligns](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snap-to-item-aligns.ts).CENTER | Alignment for snapToItem. Available values are `start`, `center`, and `end`. The default value is `center`. |
|
|
640
|
+
| snappingDistance | [SnappingDistance](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/snapping-distance.ts) = "25%" | Snapping activation distance. Can be specified as a percentage of the element size or in absolute values. The default value is `25%`. |
|
|
641
|
+
| snappingMethod | [SnappingMethod](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) = [SnappingMethods.STANDART](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snapping-methods.ts) | Snapping method. Default value is [SnappingMethods.STANDART](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts). [SnappingMethods.STANDART](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) - Classic group visualization. [SnappingMethods.ADVANCED](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) - A mask is applied to the viewport area so that the background is displayed underneath the attached group. |
|
|
642
|
+
| snapScrollToStart | boolean? = true | Determines whether the scroll will be anchored to the start of the list. Default value is "true". This property takes precedence over the snapScrollToEnd property. That is, if snapScrollToStart and snapScrollToEnd are enabled, the list will initially snap to the beginning; if you move the scroll bar to the end, the list will snap to the end. If snapScrollToStart is disabled and snapScrollToEnd is enabled, the list will snap to the end; if you move the scroll bar to the beginning, the list will snap to the beginning. If both snapScrollToStart and snapScrollToEnd are disabled, the list will never snap to the beginning or end. In the `spreadingMode=SpreadingModes.INFINITY` mode, the `snapScrollToStart` property is automatically disabled, since the list has no beginning or end. |
|
|
643
|
+
| snapScrollToEnd | boolean? = true | Determines whether the scroll will be anchored to the утв of the list. Default value is "true". That is, if snapScrollToStart and snapScrollToEnd are enabled, the list will initially snap to the beginning; if you move the scroll bar to the end, the list will snap to the end. If snapScrollToStart is disabled and snapScrollToEnd is enabled, the list will snap to the end; if you move the scroll bar to the beginning, the list will snap to the beginning. If both snapScrollToStart and snapScrollToEnd are disabled, the list will never snap to the beginning or end. In the `spreadingMode=SpreadingModes.INFINITY` mode, the `snapScrollToEnd` property is automatically disabled, since the list has no beginning or end. |
|
|
633
644
|
| snapToEndTransitionInstantOffset | number? = 0 | Sets the offset value; if the scroll area value is exceeded, the scroll animation will be disabled. Default value is "0". |
|
|
634
645
|
| scrollbarEnabled | boolean? = true | Determines whether the scrollbar is shown or not. The default value is "true". |
|
|
635
646
|
| scrollbarInteractive | boolean? = true | Determines whether scrolling using the scrollbar will be possible. The default value is "true". |
|
|
@@ -638,8 +649,11 @@ Inputs
|
|
|
638
649
|
| scrollbarThumbRenderer | TemplateRef<any> \| null = null | Scrollbar customization template. |
|
|
639
650
|
| scrollbarThumbParams | {[propName: string]: any;} \| null | Additional options for the scrollbar. |
|
|
640
651
|
| scrollBehavior | ScrollBehavior? = 'smooth' | Defines the scrolling behavior for any element on the page. The default value is "smooth". |
|
|
641
|
-
| scrollingSettings | [IScrollingSettings](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
652
|
+
| scrollingSettings | [IScrollingSettings](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scrolling-settings.ts) = {frictionalForce: 0.035, mass: 0.005, maxDistance: 100000, maxDuration: 4000, speedScale: 10, optimization: true} | Scrolling settings. |
|
|
653
|
+
| scrollingOneByOne | boolean = false | Specifies whether to scroll one item at a time if true and the scrollToItem property is set. The default value is `false`. |
|
|
654
|
+
| spreadingMode | [SpreadingMode](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/spreading-mode.ts) ='standart' | The order of list elements. Available values are `standard` and `infinity`. `normal` — list elements are ordered according to the collection sequence. `infinity` — list elements are ordered cyclically, forming an infinite list. When set to `infinity`, the `alignment` property is forced to the value `Alignments.CENTER`, the `scrollbarEnabled` property is forced to the `false`. The default value is `standard`. |
|
|
642
655
|
| trackBy | string? = 'id' | The name of the property by which tracking is performed. |
|
|
656
|
+
| zIndexWhenSelecting | string \| null = null | Defines the zIndex when a list item is selected. The default value is `null`. |
|
|
643
657
|
|
|
644
658
|
<br/>
|
|
645
659
|
|
|
@@ -647,12 +661,13 @@ Outputs
|
|
|
647
661
|
|
|
648
662
|
| Event | Type | Description |
|
|
649
663
|
|---|---|---|
|
|
650
|
-
|
|
|
651
|
-
|
|
|
652
|
-
|
|
|
653
|
-
|
|
|
654
|
-
|
|
|
655
|
-
|
|
|
664
|
+
| onSnapItem | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts) | Emit the component ID when an element crosses the alignment line specified by the snapToItemAlign property. |
|
|
665
|
+
| onItemClick | [IRenderVirtualListItem](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/models/render-item.model.ts) \| null | Fires when an element is clicked. |
|
|
666
|
+
| onScroll | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scroll-event.ts)) => void | Fires when the list has been scrolled. |
|
|
667
|
+
| onScrollEnd | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scroll-event.ts)) => void | Fires when the list has completed scrolling. |
|
|
668
|
+
| onSelect | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts) \| null | Fires when an elements are selected. |
|
|
669
|
+
| onCollapse | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts) \| null | Fires when elements are collapsed. |
|
|
670
|
+
| onViewportChange | [ISize](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/size.ts) | Fires when the viewport size is changed. |
|
|
656
671
|
| onScrollReachStart | void | Fires when the scroll reaches the start. |
|
|
657
672
|
| onScrollReachEnd | void | Fires when the scroll reaches the end. |
|
|
658
673
|
|
|
@@ -662,11 +677,11 @@ Methods
|
|
|
662
677
|
|
|
663
678
|
| Method | Type | Description |
|
|
664
679
|
|--|--|--|
|
|
665
|
-
| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
666
|
-
| scrollToStart | (cb: (() => void) \| null = null, options: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
667
|
-
| scrollToEnd | (cb: (() => void) \| null = null, options: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
668
|
-
| getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
669
|
-
| focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
680
|
+
| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts), (cb: () => void) \| null = null, options: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scroll-options.ts) \| null = null) | The method scrolls the list to the element with the given `id` and returns the value of the scrolled area. |
|
|
681
|
+
| scrollToStart | (cb: (() => void) \| null = null, options: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scroll-options.ts) \| null = null) | Scrolls the scroll area to the first item in the collection. |
|
|
682
|
+
| scrollToEnd | (cb: (() => void) \| null = null, options: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/scroll-options.ts) \| null = null) | Scrolls the list to the end of the content height. |
|
|
683
|
+
| getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts)) => [ISize \| null](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/interfaces/size.ts) | Returns the bounds of an element with a given id |
|
|
684
|
+
| focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts), align: [FocusAlignment](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts) = [FocusAlignments.NONE](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts) | Focus an list item by a given id. |
|
|
670
685
|
| preventSnapping | | Prevents the list from snapping to its start or end edge. |
|
|
671
686
|
|
|
672
687
|
<br/>
|
|
@@ -683,24 +698,50 @@ Properties
|
|
|
683
698
|
|
|
684
699
|
| Property | Type | Description |
|
|
685
700
|
|--|--|--|
|
|
686
|
-
| api | [NgVirtualListPublicService](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
687
|
-
| data | {\[id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
688
|
-
| config | [IDisplayObjectConfig](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
689
|
-
| measures | [IDisplayObjectMeasures](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
701
|
+
| api | [NgVirtualListPublicService](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/ng-virtual-list-public.service.ts) | List API Provider. |
|
|
702
|
+
| data | {\[id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/types/id.ts) \], [otherProps: string]: any;} | Collection item data. |
|
|
703
|
+
| config | [IDisplayObjectConfig](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/models/display-object-config.model.ts) | Display object configuration. A set of `select`, `collapse`, and `focus` methods are also provided. |
|
|
704
|
+
| measures | [IDisplayObjectMeasures](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/models/display-object-measures.model.ts) \| null | Display object metrics. |
|
|
690
705
|
|
|
691
706
|
<br/>
|
|
692
707
|
|
|
708
|
+
### [VirtualClickModule](https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.module.ts)
|
|
709
|
+
|
|
710
|
+
### Virtual click directive
|
|
711
|
+
|
|
712
|
+
To correctly handle interactive elements within a list, such as buttons, you need to use the VirtualClick directive.
|
|
713
|
+
|
|
714
|
+
```ts
|
|
715
|
+
import { NgVirtualListModule, VirtualClickModule } from 'ng-virtual-list';
|
|
716
|
+
|
|
717
|
+
@Component({
|
|
718
|
+
selector: 'example',
|
|
719
|
+
imports: [NgVirtualListModule, VirtualClickModule],
|
|
720
|
+
})
|
|
721
|
+
```
|
|
722
|
+
|
|
723
|
+
```html
|
|
724
|
+
<ng-template #itemRenderer let-data="data" let-config="config" let-api="api">
|
|
725
|
+
@if (data) {
|
|
726
|
+
<div virtualClick (onVirtualClick)="api.select(data.id, true)">
|
|
727
|
+
<span>{{data.name}}</span>
|
|
728
|
+
</div>
|
|
729
|
+
}
|
|
730
|
+
</ng-template>
|
|
731
|
+
```
|
|
732
|
+
|
|
693
733
|
## 📦 Previous versions
|
|
694
734
|
|
|
695
735
|
| Angular version | ng-virtual-list version | git | npm |
|
|
696
736
|
|--|--|--|--|
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
|
|
|
700
|
-
|
|
|
701
|
-
|
|
|
702
|
-
|
|
|
703
|
-
|
|
|
737
|
+
| 21.x | 21.12.0 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/21.x) | [21.12.0](https://www.npmjs.com/package/ng-virtual-list/v/21.12.0) |
|
|
738
|
+
| 20.x | 20.12.0 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.12.0](https://www.npmjs.com/package/ng-virtual-list/v/20.12.0) |
|
|
739
|
+
| 19.x | 19.12.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.12.0](https://www.npmjs.com/package/ng-virtual-list/v/19.12.0) |
|
|
740
|
+
| 18.x | 18.12.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.12.0](https://www.npmjs.com/package/ng-virtual-list/v/18.12.0) |
|
|
741
|
+
| 17.x | 17.12.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.12.0](https://www.npmjs.com/package/ng-virtual-list/v/17.12.0) |
|
|
742
|
+
| 16.x | 16.12.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.12.0](https://www.npmjs.com/package/ng-virtual-list/v/16.12.0) |
|
|
743
|
+
| 15.x | 15.12.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.12.0](https://www.npmjs.com/package/ng-virtual-list/v/15.12.0) |
|
|
744
|
+
| 14.x | 14.12.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.12.0](https://www.npmjs.com/package/ng-virtual-list/v/14.12.0) |
|
|
704
745
|
<br/>
|
|
705
746
|
|
|
706
747
|
## 🤝 Contributing
|