Multifunctional lists ng-virtual-list as a replacement for standard ones

Hello to all dear readers.

About a year ago, I decided to create a universal open-source solution for list visualization. In the first versions, I tested the virtualization technology with various parameters, and there was a lot of research and questions. Today, version X.12.X was released, which runs on Angular 14-22. I’d like to talk about the capabilities of the tool (ng-virtual-list), the problems it solves, and give a brief overview with examples.

All examples below are contained in the code sample documentation.

The ng-virtual-list tool provides virtualized, high-performance lists with a variety of features that standard lists don’t have.

The ng-virtual-list library focuses on rendering lists with fixed-sized items (the fastest rendering algorithm) and lists with dynamically sized items.

The system has its own scrolling mechanism, so on a desktop computer you can scroll through lists using mouse or touchpad movements, just like on mobile devices.

The functionality includes scroll snapping to list items with various alignment options. Events such as onSnap are also available, which are ideal for notifying about element focus during scrolling.

Any list with different settings can be thought of as an infinite list that will iterate over collections of elements.

For each collection item, you can specify a set of metadata that will determine the behavior and sizes of the items on the screen.

The first versions of ng-virtual-list were designed for messaging apps and had many bugs and omissions. Now, the functionality has been fully tested and refined, including the ability to pin the scrollbar to the bottom or top of a vertically oriented list, lazy loading of elements when reaching the beginning or end of the list, keyboard navigation, and much more.

Examples of processing large collections include a news feed or an online store content browser. Thanks to element virtualization, the performance of processing lists with large collections remains consistently high.

Lists can be divided into vertical columns or horizontal rows. Using metadata, list items can be resized to vary their width or height, or a stickyLayout can be applied to multiple items, creating a layout similar to the one shown above.

The ng-virtual-list component allows you to apply element transformations, add depth of field (DOF) effects, and add motion blur (MotionBlur). Above is a demonstration of navigating between elements using swipe gestures.

P.S.: If you liked the project, give it a star ⭐ ng-virtual-list