ng-virtual-list 20.9.0 → 21.9.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
CHANGED
|
@@ -10,7 +10,7 @@ Works correctly in all browsers and platforms.
|
|
|
10
10
|
|
|
11
11
|
<img width="1033" height="171" alt="logo" src="https://github.com/user-attachments/assets/b559cfde-405a-4361-b71b-6715478d997d" />
|
|
12
12
|
|
|
13
|
-
<b>Angular version
|
|
13
|
+
<b>Angular version 21.X.X</b>.
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -99,6 +99,57 @@ npm i ng-virtual-list
|
|
|
99
99
|
|
|
100
100
|
<br/>
|
|
101
101
|
|
|
102
|
+
### IMPORTANT
|
|
103
|
+
|
|
104
|
+
`Zone.js` is required for correct rendering.
|
|
105
|
+
|
|
106
|
+
- `package.json`:
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
...
|
|
110
|
+
"dependencies": {
|
|
111
|
+
...
|
|
112
|
+
"zone.js": "~0.15.0"
|
|
113
|
+
},
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
- `angular.json`:
|
|
118
|
+
```json
|
|
119
|
+
{
|
|
120
|
+
"projects": {
|
|
121
|
+
"PROJECT_NAME": {
|
|
122
|
+
...
|
|
123
|
+
"architect": {
|
|
124
|
+
"build": {
|
|
125
|
+
...
|
|
126
|
+
"options": {
|
|
127
|
+
...
|
|
128
|
+
"polyfills": [
|
|
129
|
+
"zone.js"
|
|
130
|
+
],
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
- `app.config.ts`:
|
|
140
|
+
```ts
|
|
141
|
+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
|
142
|
+
|
|
143
|
+
export const appConfig: ApplicationConfig = {
|
|
144
|
+
providers: [
|
|
145
|
+
...
|
|
146
|
+
provideZoneChangeDetection(),
|
|
147
|
+
]
|
|
148
|
+
};
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
<br/>
|
|
152
|
+
|
|
102
153
|
## 🚀 Quick Start
|
|
103
154
|
```html
|
|
104
155
|
<ng-virtual-list [items]="items" [bufferSize]="5" [itemRenderer]="itemRenderer" [itemSize]="64"></ng-virtual-list>
|
|
@@ -638,35 +689,35 @@ Selecting even elements:
|
|
|
638
689
|
|
|
639
690
|
## 📚 API
|
|
640
691
|
|
|
641
|
-
### [NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
692
|
+
### [NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts)
|
|
642
693
|
|
|
643
694
|
Inputs
|
|
644
695
|
|
|
645
696
|
| Property | Type | Description |
|
|
646
697
|
|---|---|---|
|
|
647
698
|
| id | number | Readonly. Returns the unique identifier of the component. |
|
|
648
|
-
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
699
|
+
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
|
|
649
700
|
| itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
|
|
650
701
|
| bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
|
|
651
702
|
| 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. |
|
|
652
703
|
| itemRenderer | TemplateRef | Rendering element template. |
|
|
653
|
-
| methodForSelecting | [MethodForSelecting](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
654
|
-
| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
704
|
+
| methodForSelecting | [MethodForSelecting](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/method-for-selecting.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. |
|
|
705
|
+
| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts) | Sets `sticky` position and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied. 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`. `selectable` determines whether an element can be selected or not. Default value is `true`. |
|
|
655
706
|
| 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`. |
|
|
656
|
-
| collectionMode | [CollectionMode? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
707
|
+
| collectionMode | [CollectionMode? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/collection-mode.ts) | Determines the action modes for collection elements. Default value is `normal`. |
|
|
657
708
|
| 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`. |
|
|
658
709
|
| snap | boolean? = false | Determines whether elements will snap. Default value is "false". |
|
|
659
|
-
| snappingMethod | [SnappingMethod? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
660
|
-
| direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
710
|
+
| snappingMethod | [SnappingMethod? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) | Snapping method. 'normal' - Normal group rendering. 'advanced' - The group is rendered on a transparent background. 'chat' - The group is rendered on a background. List items below the group are not rendered. |
|
|
711
|
+
| direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical". |
|
|
661
712
|
| dynamicSize | boolean? = false | If true then the items in the list can have different sizes and the itemSize property is ignored. If false then the items in the list have a fixed size specified by the itemSize property. The default value is false. |
|
|
662
713
|
| enabledBufferOptimization | boolean? = true | Experimental! Enables buffer optimization. Can only be used if items in the collection are not added or updated. |
|
|
663
714
|
| trackBy | string? = 'id' | The name of the property by which tracking is performed. |
|
|
664
|
-
| selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
665
|
-
| collapsedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
715
|
+
| selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts) \| undefined | Sets the selected items. |
|
|
716
|
+
| collapsedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts)> | Sets the collapsed items. |
|
|
666
717
|
| 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. |
|
|
667
|
-
| langTextDir | [TextDirection? = 'ltr'](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
718
|
+
| langTextDir | [TextDirection? = 'ltr'](https://github.com/DjonnyX/ng-virtual-list/blob/21.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). |
|
|
668
719
|
| loading | boolean? = false | If `true`, the scrollBar goes into loading state. The default value is `false`. |
|
|
669
|
-
| scrollbarTheme | [ScrollBarTheme?](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
720
|
+
| scrollbarTheme | [ScrollBarTheme?](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/scrollbar-theme.ts) | Scrollbar theme. |
|
|
670
721
|
| clickDistance | number? = 40 | The maximum scroll distance at which a click event is triggered. |
|
|
671
722
|
| waitForPreparation | boolean? = true | If true, it will wait until the list items are fully prepared before displaying them.. The default value is `true`. |
|
|
672
723
|
| scrollStartOffset | number? = 0 | Sets the scroll start offset value; Default value is "0". |
|
|
@@ -681,12 +732,12 @@ Outputs
|
|
|
681
732
|
|
|
682
733
|
| Event | Type | Description |
|
|
683
734
|
|---|---|---|
|
|
684
|
-
| onItemClick | [IRenderVirtualListItem](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
685
|
-
| onScroll | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
686
|
-
| onScrollEnd | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
687
|
-
| onSelect | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
688
|
-
| onCollapse | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
689
|
-
| onViewportChange | [ISize](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
735
|
+
| onItemClick | [IRenderVirtualListItem](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/render-item.model.ts) \| undefined | Fires when an element is clicked. |
|
|
736
|
+
| onScroll | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/scroll-event.model.ts)) => void | Fires when the list has been scrolled. |
|
|
737
|
+
| onScrollEnd | ([IScrollEvent](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/scroll-event.model.ts)) => void | Fires when the list has completed scrolling. |
|
|
738
|
+
| onSelect | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts) \| undefined | Fires when an elements are selected. |
|
|
739
|
+
| onCollapse | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts) \| undefined | Fires when elements are collapsed. |
|
|
740
|
+
| onViewportChange | [ISize](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/size.ts) | Fires when the viewport size is changed. |
|
|
690
741
|
| onScrollReachStart | void | Fires when the scroll reaches the start. |
|
|
691
742
|
| onScrollReachEnd | void | Fires when the scroll reaches the end. |
|
|
692
743
|
|
|
@@ -696,10 +747,10 @@ Methods
|
|
|
696
747
|
|
|
697
748
|
| Method | Type | Description |
|
|
698
749
|
|--|--|--|
|
|
699
|
-
| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
700
|
-
| scrollToEnd | (cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
701
|
-
| getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
702
|
-
| focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
750
|
+
| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts), cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/scroll-options.model.ts)) | The method scrolls the list to the element with the given `id` and returns the value of the scrolled area. |
|
|
751
|
+
| scrollToEnd | (cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/scroll-options.model.ts)) | Scrolls the scroll area to the last item in the collection. |
|
|
752
|
+
| getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts), behavior?: ScrollBehavior) => void | Returns the bounds of an element with a given id |
|
|
753
|
+
| focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts), align: [FocusAlignment](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts) = [FocusAlignments.NONE](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts) | Focus an list item by a given id. |
|
|
703
754
|
|
|
704
755
|
<br/>
|
|
705
756
|
|
|
@@ -715,9 +766,9 @@ Properties
|
|
|
715
766
|
|
|
716
767
|
| Property | Type | Description |
|
|
717
768
|
|--|--|--|
|
|
718
|
-
| data | {\[id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
719
|
-
| config | [IDisplayObjectConfig](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
720
|
-
| measures | [IDisplayObjectMeasures](https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
769
|
+
| data | {\[id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts) \], [otherProps: string]: any;} | Collection item data. |
|
|
770
|
+
| config | [IDisplayObjectConfig](https://github.com/DjonnyX/ng-virtual-list/blob/21.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. |
|
|
771
|
+
| measures | [IDisplayObjectMeasures](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/display-object-measures.model.ts) \| undefined | Display object metrics. |
|
|
721
772
|
|
|
722
773
|
<br/>
|
|
723
774
|
|
|
@@ -725,6 +776,7 @@ Properties
|
|
|
725
776
|
|
|
726
777
|
| Angular version | ng-virtual-list version | git | npm |
|
|
727
778
|
|--|--|--|--|
|
|
779
|
+
| 20.x | 20.9.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [20.9.0](https://www.npmjs.com/package/ng-virtual-list/v/20.9.0) |
|
|
728
780
|
| 19.x | 19.9.2 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.9.2](https://www.npmjs.com/package/ng-virtual-list/v/19.9.2) |
|
|
729
781
|
| 18.x | 18.9.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.9.0](https://www.npmjs.com/package/ng-virtual-list/v/18.9.0) |
|
|
730
782
|
| 17.x | 17.9.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.9.0](https://www.npmjs.com/package/ng-virtual-list/v/17.9.0) |
|