ng-virtual-list 15.4.2 → 15.4.4
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 +35 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,49 @@
|
|
|
1
1
|
# NgVirtualList
|
|
2
2
|
|
|
3
3
|
Maximum performance for extremely large lists.<br/>
|
|
4
|
-
|
|
4
|
+
Flexible, and actively maintained Angular library that excels with high-performance, feature-rich virtualized lists—including grouping, sticky headers, snapping, animations, and both scroll directions. Whether you're rendering millions of items or building interactive list components, it delivers scalability and customization.
|
|
5
5
|
|
|
6
6
|
<img width="1033" height="171" alt="logo" src="https://github.com/user-attachments/assets/b559cfde-405a-4361-b71b-6715478d997d" />
|
|
7
7
|
|
|
8
|
-
Angular version
|
|
8
|
+
Angular version 15.X.X.
|
|
9
9
|
|
|
10
10
|
[Live Demo](https://ng-virtual-list-chat-demo.eugene-grebennikov.pro/)
|
|
11
11
|
|
|
12
12
|
[Live Examples](https://ng-virtual-list.eugene-grebennikov.pro/)
|
|
13
13
|
|
|
14
|
+
<br/>
|
|
15
|
+
|
|
16
|
+
| **Pros** | **Description** |
|
|
17
|
+
| --- | --- |
|
|
18
|
+
| **High performance** | Only renders items visible in the viewport (plus a buffer), reducing DOM overhead and improving responsiveness—even with very large datasets |
|
|
19
|
+
| **Grouped lists with sticky headers & snapping** | Supports grouping items, sticky headers, and optional “snap” behavior for clean section scrolling |
|
|
20
|
+
| **Angular (14–20) compatibility** | Compatible with Angular versions 14 through 20.x, ensuring seamless integration in modern Angular projects |
|
|
21
|
+
| **Scroll-to capabilities** | Allows programmatic navigation to specific items by ID |
|
|
22
|
+
| **TypeScript support** | Comes with typing for safety and better integration in TypeScript projects |
|
|
23
|
+
|
|
24
|
+
<br/>
|
|
25
|
+
|
|
26
|
+
## When to Use It: Ideal Use Cases
|
|
27
|
+
|
|
28
|
+
Drawing on general virtual-scroll insights and ng-virtual-list features:
|
|
29
|
+
|
|
30
|
+
Long-Scrolling Lists / Live Feeds
|
|
31
|
+
When displaying hundreds of thousands of items (think social media feeds, chat logs, or news streams), ng-virtual-list ensures smooth and responsive rendering without overwhelming the browser.
|
|
32
|
+
|
|
33
|
+
Horizontal Carousels or Galleries
|
|
34
|
+
Ideal for media-rich UI elements like image galleries, product cards, or horizontal scrollers where traditional ngFor rendering becomes sluggish.
|
|
35
|
+
|
|
36
|
+
Grouped Navigation with Section Headers
|
|
37
|
+
For catalogs, logs, or grouped entries (e.g., by date or category), you can use sticky headers and snapping to guide user navigation effectively.
|
|
38
|
+
|
|
39
|
+
"Jump to" Item Navigation
|
|
40
|
+
Use cases like directories or chat histories benefit from the ability to scroll directly to specific items by ID.
|
|
41
|
+
|
|
42
|
+
Complex or Rich-Content Templates
|
|
43
|
+
As each item may contain images, nested components, or interactions, virtual rendering keeps performance intact even when item complexity increases.
|
|
44
|
+
|
|
45
|
+
<br/>
|
|
46
|
+
|
|
14
47
|
## Installation
|
|
15
48
|
|
|
16
49
|
```bash
|